The USS Quad Damage

I will need to tell you this as a journey, because if I just gave you the information you would still be on your wild pinball journey through the internet. This journey, however, has had all of the dead ends removed for your convenience. I hope you appreciate it, and if you see some guy sniping various members of the web browser and web standards crowd from a rooftop, take the time to share an empathic moment.

Let’s say you want to render a scrollable table with a fixed heading using only CSS and HTML. A reasonable goal, you might assume, but you need it to work across browsers. You will initially land here, but the solution is unworkable for a number of reasons.

The first is that while it works on IE6 and Firefox, when you try and put it onto your webpage it won’t work in IE. After randomly banging your head you will eventually run across a site similar to this and you will execute the javascript to find that you’re in Quirks mode, and for some reason the weird satanic behaviour exhibited by IE for these scrolling tables only happens in standards mode, for some strange reason. You will figure out a way to get your website in standards mode, because no other solution works without a huge chunk of javascript.

The second problem you’ll come across is that it doesn’t work in IE7. One of the ways the solution works is by hiding CSS from IE6 is using special selectors which IE6 won’t understand. Unfortunately, IE7 does understand them, which means it will try and render it as if it was firefox, and fuck it up. Eventually, you’ll get to a website which will tell you something like this:

div.someClass {
height: 20px;
/* Firefox will ignore the
following line,
but IE7 won’t! */
#height: 20px;
}

Hooray. Now you can find a way to reset all the stuff which you set up in firefox. You’re set to go. Except that you’ll eventually figure out that the solution renders table elements as “block”, which makes them not table-ish. You will promptly remove them and see that everything is still fine. After fucking around with the stylesheet some more, you’ll find that it renders properly in both IE and firefox. “Thank god, I'm finished!” you’ll think

Except you’re not. See, when you remove elements, you’ll realise that while the IE still renders this fine, Firefox will enlarge the elements vertically to the height you specified if there aren’t enough elements to fill it up and give you a scroll bar. After trying various things, you’ll come to realise that this makes sense, but it still makes you angry because it’s not what you want. You may even go and try the multiple tables method, or mess with shit like absolute positioning, but it will fuck things up pretty bad. Eventually you’ll realise that the "display: block;" elements were for, even though they will make your table fundamentally not a table, and will mean that getting all the columns to line up will be a pain in the arse, you’ll have spent so much time on this that an actual solution might not be an elegant solution, but it’s a solution nonetheless.

So, you’ll stick the “display: block” back on the table header and body, and if you’ve been paying attention, you’ll put absolute widths on the appropriate cells. Then you’ll spend another hour or so fucking around with the CSS again until it looks right. You’ll probably spend the night hating the W3C and the Mozilla guys and Microsoft, and you may even contemplate buying a ticket to wherever the hell they all are and give them a... good talking to.

I know I will.