|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Problems with CSS layout
To fully understand CSS layout, you must not only be aware of it's benefits, but you must also be ready for some problems it presents. Most of these problems stem out from CSS's immaturity. Yes, the recommendation itself has been around for a while, but CSS layouts are only recently possible, and even more recently taken seriously by developers. Expect this immaturity to result in problems, such as:
So then, with all these problems, why use CSS? You'll have to make this decision yourself. Many people I know use CSS layouts for personal web projects, but still resort to tables when working on commercial sites. The time is coming when CSS will be suitable and preferred for all site layout, but many reasonably argue that the time has not yet arrived.
I use CSS because I believe in the fundamental principle of the separation of structure and presentation, and I am willing to put up with the problems CSS presents as I look forward to a time when CSS is as robust and simple to implement as tables are today. That time will come, and the web will be a better place for it.
Example: Re-coding the Internet Developer Home Page
To make things interesting, I took the Apple Internet Developer home page, which makes extensive use of tables, and I re-coded it using CSS for all layout. I've made a copy of the home page as it existed when I started this article, and I've turned on all table borders so you can see what we're working with: the Apple Internet Developer home page with table borders.
Now, If you're using IE5+ or NS6+, you should see virtually the same layout here: The Apple Internet Developer home page with only CSS. Opera 5+ users should see a very similar page, but with a few display quirks.
Now that I've shown you the fruits of my labor, take a closer look at the techniques used. Start at the top of the page, where there is a 600px wide graphical image bar centered in the browser window.
using a table this is accomplished something like so:
The complete markup can be seen in the file top_nav_table.html.
Using CSS I got the same results by using a
DIV instead of a table element, and setting the DIV's
Sadly, this is where I ran into the first
browser discrepancy. IE5.x does not properly implement the
Those familiar with CSS may know that this
is a mis-implementation of the
Now take a look at all the style rules used in creating the top navigation bar using CSS (the complete markup can be seen in the file top_nav_css.html):
I've already talked about the
This rule causes all the links in the
Notice that I used a background image for the form, which places an image behind the form's text element and makes it blend in nicely with the images in the navigation bar. The following rule defines the display of the form's input element:
And there you have it. I've replaced a double nested table structure with a simple series of links wrapped around images and a simple form. All the layout information has been moved into the style sheet. If you haven't already done it, now is the time to compare the markup code: using tables vs. using CSS
Next, take a look at the top middle section of the page, starting below the top navigation bar and ending at the first gray horizontal bar:
I won't spend any time on this code for this section because it uses the same CSS techniques as the top navigation bar.