CSS positioning hacks me off

Jeffrey Zeldman writes today about the biggest obstacle standing in the way of CSS adoption -- features that work everywhere but one or two poorly programmed browsers, forcing ugly workarounds like the Tantek hack:

Every time I design a site in CSS I hit the same wall where the logic works, the CSS and XHTML validate, and the display is perfect except in Browser X, where it is so bad I need to start over.

When I redesigned Workbench, I was inspired by CSS fundamentalist Matthew Mullenweg to drop tables and use CSS for positioning. It moves the important content higher on the page, promotes accessibility, and should in theory produce a more elegant, maintainable design.

Unfortunately, that theory went over like evolution in Kansas. CSS hacks produce code as homely as anything in a table-based layout, and unlike tables, you can't adhere to a standard and get the desired results. Every CSS design requires browser- and bug-specific kludges.

I could live with that -- I kludge, therefore I am -- but CSS requires absolute positioning to do a three-column layout like this one. As a screen shot of a Glish tutorial shows, absolute positioning causes page elements to overlap when the browser window is resized, a result I regard as both unusable and amateurish.

After fighting this for a few hours, I decided to zag where Zeldman zigged. I went back to using tables for three-column layout and CSS everywhere else.

2004/03/23 · 9 COMMENTS · Link

Comments

Couldn't you use absolute positioning and widths using percent values?

#1 · Keith Lea · -1/11/30

Rogers,

Even table based layouts with horizontal scrolling look less than ideal if the idiot on the other end of the browser insists on resizing lower than practicable limits.

I try to take the position of designing to standards and let those who want to resize the window to 4 inches or use non-compliant browsers (when there are plenty of free compliant ones) be damned.

That said for my business site I do try to ensure that it looks reasonable in most browsers, however, I don't want to learn the hacks.

#2 · Andy Fragen · 2004/03/23

By designing to standards, do you mean standard CSS without the hacks?

#3 · Rogers Cadenhead · 2004/03/23

Keith: I need the left and right sidebars to be fixed width (100 on the left, 125 on the right).

#4 · Rogers Cadenhead · 2004/03/23

Yes, I mean CSS without hacks. Now I don't think Zeldman is using hacks, it sounds like he's just trying to come up with a different method using CSS to work about Browser A and Browser B's problems in handling XHTML and CSS that validate.

#5 · Andy Fragen · 2004/03/23

Though, Rogers I have to say that I ran into the same problem in creating a 3 column layout. My solution was a design change to a 2 column layout. I compromise -- yes, but all you've got in the right column is Google ads. Perhaps they could be in a horizontal layout under neath the content?

BTW, I preface all my comments in that this is not my day job. ;)

#6 · Andy Fragen · 2004/03/23

Maybe the way to follow is in the middle. positioning big areas with tables (as a template), and using CSS positioning iside the main areas.
This way you can avoid table imbrication that cloggs up the code and still be comprehensible to aural and braille navigators. When you specifie you targeted media (@media) you can hide tables with (display:none) and so on. I don't think it's hacking but just adaptation until things work better.

#7 · Mathieu M.O'Dowd · 2004/03/24

I'd love to minimize tables as much as possible, both for the reasons you state and because dealing with nested tables is a pain. I think that Workbench only uses them for three-column layout.

#8 · Rogers Cadenhead · 2004/03/24

I'd be happy to help you achieve what you're going for without tables. You have a pretty good transitional layout now, but if you want to make the final leap drop me an email.

#9 · Matt · 2004/03/25