All Things Patrick - Working Hard to be Lazy!

As great as Firefox is for web development, it still has it's quirks (just like every other browser). Granted, the few I've run into are nowhere near as bad as IE's quirks, bugs, & bad implimentations. This latest project is proving quite interesting...

My preference for development is to develop in Firefox & then check it in IE - just to make sure it's still at least readable.

IE is probably the worste thing to do backup testing in, but generally if something is developed in Firefox or Opera (probably even Safari, but I still don't have a Mac) it will work on the other 99% standards compliant browsers. IE definately has issues, but in trying to make a cross-platform world readable interface one must test in IE... even if it's simply to make sure stuff is readable & all the elegance & special features are missing.

Anyways, back to my Firefox 'bug'. I've been putting together a table based search preferences page. I hate using tables for this sort of thing, but until IE 5.5 (requirements for this web app) starts implimenting CSS3 I'm kinda stuck with tables to force a specific location on things. So developing this in Firefox wasn't an issue... The table headers (<th>) were aligned left & everything else worked fine. So I loaded up IE to check & make sure everything looked ok there & the <th>'s were center aligned... hmm...

Ok, standard rendering of a <th> is center aligned... It's been this way since who knows when. Otoh I do have some CSS somewhere in my style sheets that defines certain <th> characteristics so I figured that's why the <th>'s had been left aligned. Considering I'm using a bunch of IE hacks to fix certain things (& unfix other things) I thought that I (or somebody else) might have have disabled the left alignment of table headers in IE. Bzzt! wrong answer :(

I really wasn't even getting around to trying to 'debug' this table header issue when I loaded it in Opera, I just wanted to make sure the page looked ok. That's when I noticed that the <th>'s were centered there as well... whoops! That means my previously defined CSS probably has nothing to do with setting these particular <th>'s.

Going back to Firefox I pop open Firebug, hit [Inspect], click on a <th> & scroll through the CSS pane to see if there's a bit of CSS stating text-align: left; that Firefox is picking up, but not Opera. Hmm.... There's absolutely no CSS stating any kind of text-align property for this <th>.

Is this a bug in Firefox ???? I couldn't believe it! So I decided to check the W3C specifications just to make sure... Here's what the specs at http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#edef-TH -

Table cells may contain two types of information: header information and data. This distinction enables user agents to render header and data cells distinctly, even in the absence of style sheets. For example, visual user agents may present header cell text with a bold font. Speech synthesizers may render header information with a distinct voice inflection.

Well that doesn't say anything about horizontal alignment... Let's see if there's anything else?

The TH element defines a cell that contains header information. User agents have two pieces of header information available: the contents of the TH element and the value of the abbr attribute.

Ok, that's more to do with attaching the <th> to the td (somewhat similar to attaching <label>s to <input>s).

The specific issue I was having was in regards to a <th> inside of a <tbody>. I still need to run some more tests, but I think Firefox centers a <th> inside of a <thead> as well as a simply stacked <table> <tr> <th>.

Conclusion: W3C docs do not specify any horizontal positioning for table headers.

For consistent behaviour it's probably best to force settings you want where you really want them... even if those are the typical defaults... You never know when a browser is going to change how it handles defaults of elements.