journal

Progressive Enhancement with CSS 3

Fri, 11 Jan 2008 07:00:25 -0500

Dev.Opera takes us through some of the available enhancements that modern browsers are supporting such as Safari 3 and Opera 9.5 support for new CSS3 effects. Opacity, dropshadows and tiger-striping don't rely on javascript, but we still need to support browsers that don't use these new CSS3 effects.

Read the full article at Dev.Opera

CSS Textwraps Are Not Just For Rectangles Anymore

Wed, 05 Dec 2007 09:14:24 -0500

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other then just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.

There's a really nice interactive demo of how it works.

It has benn tested in Internet Explorer 6+, Firefox, Safari, Opera, and Netscape.

Boilerplate CSS Framework

Tue, 04 Dec 2007 18:54:30 -0500

A very nice CSS framework, Boilerplate, is available from one of the authors of Blueprint CSS framework. Yes, it is simple, elegant and semantic like the logo says.

Div On The Table

Thu, 27 Apr 2006 10:34:00 -0500

A recent project required me to develop a reservation data table that needed to be flexible enough across installs that we could quickly change the look and behavior of the table without touching any of the core code. Varying widths, colors, status background images, cell heights were just some of our requirements. All data is retrieved from a MySQL database via PHP. Varying cell widths based on the data made this even more of a challenge as well as each "available" time slot had to include a radio button for new reservations.

Sure, this can be done with CSS and HTML tables, but that's not as fun now; is it? Here's a mockup of the divs used in the project.

I start with a div container for the css table called "teetable". For each row, I wrap the CSS cells in another container called "teerow". From there I assign widths to the contained divs with a numerator at the end of the id. A cell that spans two slots has an id ending in -2 (teecell-2), one that spans three ends in -3 and so forth. I repeat this logic throughout the CSS table to get the desired results.

Example html:

<div id="teetable"> <div id="teerow"> <div id="teedate"></div> <div id="teehead">One</div> <div id="teehead">Two</div> <div id="teehead">Three</div> <div id="teehead">Four</div> </div> <div id="teerow"> <div id="teedate">7:08am</div> <div id="teecell-2" class="reserved">Some Data Goes Here</div> <div id="teecell-2" class="reserved">Some Data Goes Here</div> </div> <div id="teerow"> <div id="teedate">7:20am</div> <div id="teecell-1" class="available">Some Data Goes Here</div> <div id="teecell-1" class="reserved">Some Data Goes Here</div> <div id="teecell-1" class="checked-in">Some Data Goes Here</div> <div id="teecell-1" class="reserved">Some Data Goes Here</div> </div> <div id="teerow"> <div id="teedate">7:30am</div> <div id="teecell-4" class="reserved">Some Data GoesHere</div> </div> </div>

The underlying CSS looks something like this:

#teetable { width: 625px; margin: 20px 0 20px 20px; display: block; } #teehead { width: 125px; height: 20px; float: left; text-align: center; vertical-align: middle; background: #ccc; font-weight: bold; } #teerow { width: 625px; display: block; } #teedate { width: 125px; height: 20px; vertical-align: middle; float: left; background: #ccc; text-align: center; } #teecell-1, #teecell-2, #teecell-3, #teecell-4 { height: 20px; overflow: hidden; vertical-align: middle; float: left; text-align: center; border-bottom: 1px solid #666; } #teecell-1 {width: 125px;} #teecell-2 {width: 250px;} #teecell-3 {width: 375px;} #teecell-4 {width: 500px;} .available { background: #fff; } .reserved { background: #009966 url(images/reserved.gif); } .checked-in { background: #33CCFF url(images/checkedin.gif); } .available { background: #fff url(images/available.gif); }

The beauty of this really lies in the PHP that grabs the rows from the database and loops through building the div id's. I have a database table that holds the number of people for each time slot. There is no maximum number of people, but the grid will only show four slots. With a little switch/case, we're off and running with a dynamic CSS data table. All teecells are suffixed with -1, -2, -3, -4 based on the number of people. Remember, our -4 means the cell spans across our four columns.

Based on if the time slot has checked in, is available, or is reserved, a simple if statement throws the table it's style for the background.

if ($res->checkin == "") { $class = " class=\"reserved\""; } else { $class = " class=\"checked-in\""; }

I cannot provide the full working code, but there is a zip file containing the html and css for this narrative. If you find it useful, drop me a line and let me know what you're using it for.

IE7 Beta 2 Refresh Fixes UL Bug

Thu, 23 Mar 2006 08:12:00 -0500

The latest IE7 beta 2 Preview is available here at Microsoft.com.

You must uninstall any previous IE7 installs before installing.

The

rails.techno-weenie.net

UPDATE: They may have fixed this bug, but they really fubarred the back and forward buttons.. what a mess. This isnt a beta, it's more like an alpha.

IE7, Typo & the Tag

Mon, 20 Mar 2006 04:31:00 -0500

For everyone out there running IE7 beta, the

IE6,

ie7 as a standalone app

UPDATE: IE7 beta 2will be refreshed this week, not like that's all that big of an update, but the important part is the rendering engine is finalized so this bug should dissappear as of the end of the week. let's keep our fingers crossed. Maybe they'll actually by web 2.0 & css2 compliant now.. rofl :)

NOTE: You will only see scroll bars here in IE7

Item 1
Item 2
Item 3