Ethan Marcotte now blogs at Unstoppable Robot Ninja.

Weblog entry:

I hate tables

Update: I’ve figured it out. The problem was with one of my least favorite things: MIME types. Huzzah.

Most recently at the new job, I’ve been working on some proof-of-concept, all-CSS skins for the iCommons courseware. Most of the application’s development team see the merits of stylesheets (mention separation of presentation from content, and watch a room of Java developers drool), but now I’m tasked with selling the technology to the management-ish folks — hence, demos. If all goes well, then I’ll be able to get additional resources to help overhaul the application, making it more robust, more standards-compliant, and generally more sexy. Anyway, I ramble. And now, I digress.

For the demo, the markup I’m trying to style is pretty heavily table-based, most notably in the content area. On one template, the content is divided into two columns, about a 20%/80% split. As this is just a proof-of-concept (and naturally, I’ll be conducting the demos on a mighty fine browser), I figured I’d use a little CSS2 to give the left-hand table cell a distinct style. I fired up my favorite text editor, and tossed in a rule that looked something like this:

#content>table>tr>td:first-child

In theory, this rule should have allowed Firefox (and any other browser with support for child selectors and the :first-child pseudo-class) to select just the first content cell, and style it independently of its siblings. As you may have guessed, I wouldn’t be wasting your time if it had actually worked.

To say I was underwhelmed with the initial results would be an orca-fat understatement. The rule simply wasn’t working, and I’d no idea why. At first I chalked it up to human error, but the rule looked like it should work — and since both the HTML and CSS validated, I was at a bit of a loss. Hell, I even ran the rule through the Selectoracle: yes, I was getting that paranoid about my acquired CSS knowledge.

It wasn’t until I’d simplifying my CSS and reworking the HTML that I accidentally stumbled across finally hit upon the answer: the reason my child selectors weren’t working was because my browser was creating an invisible tbody element. Check it out, and be sure to view source; only one table has a tbody element, but both tables apply the following CSS rule:

#content>table>tbody>tr>td:first-child

So. One of two things is happening here:

  1. All the browsers I’ve tested on (Firefox, Mac/IE5.2, Opera 7.5) are surrounding a table’s content with a “phantom” tbody in the DOM tree. I can’t find anything in the HTML specification that would mandate this behavior, leading me to think that browsers are doing A Very Bad Thing.

  2. Ethan is missing something really very obvious, and is a complete loon.

If it’s the latter, fine; I’ve been getting cocky since my readership swelled to four, so it’s probably a good thing if knock my audience down to sub-atomic levels with some clueless coding. Otherwise, if you’ve any technical insight into what’s going on here, I’d love to hear about it.

Comments

Hooray, technical difficulties.

There’s a WordPress issue that’s currently preventing old comments from displaying correctly. Sorry for the inconvenience, but hopefully we’ll be back online soon.