So the app I’m working on needed tabs. I figured this was the perfect chance to use some of those sporty CSS tabs that just take an unordered list and makes purty tabs. Since it’s just CSS.. it would be simple, right?

Wrong!

I tried nearly every example on
this page, and to my astonishment, most of them completely failed to work at all. Why?

First things first – HTML/CSS guys are not necessarily programmers. That means they may miss that pedantic little charater trait which forces you to scrutinize every single tiny possible boundary case to keep your shit from breaking.

In no particular order (an unordered list!), here’s the problems I ran into:

– Absolute Positioning: Face it, this shit doesn’t work. Nothing better than seeing the tabs rendered on top of each other.

– Inflexible designs: Some of these tabs can’t handle more than n tabs before they start overlapping or doing other weird stuff. Most can’t handle wrapping at all.

– Hacks and unsupported standards: “Supports XHTML 1.0 Strict and CSS3″… hmmmm mmmmkay… Problem here is that no one cares about that shit.

– Relative sizing and spacing: Normally this is a good thing, but this shit has never really worked and it ain’t about to start. My favorite was people using em’s to set header widths and watching everything get scrunched into a teensy little wad in the corner of the screen.

– Ones that just don’t work… at all. Some of these rendered out as oddly colored bars which seem to resemble a child’s Lego™ creation. Others had nice little submenus rendering a good 6 inches above the menu itself. I love that!

So, in conclusion, the reality of CSS in 2005 is that it’s barely adequate to make tabs in a web browser.