IE and another JS blunder...

So I report with great disdain, yet another problem with IE and cross browser compatibility. IE does not (by design) support the .innerHTML property correctly for elements like TABLE, THEAD, TFOOT, TR, and TBODY (even though it's not listed there). They decided for some unknown reason to be different on this topic than EVERY OTHER browser on the market.

Now, I will say, as a matter of practice, I resist the use of innerHTML as much as possible, using the DOM's document.createElement instead. I have, however, run into a case where this is not only impractical, it is not possible due to the very dynamic nature of the project I am working on.

So I built my project using FireFox (as usual) then crossed my fingers and launched it in IE to test compatibility. I was greeted with an ever-so-informative "Unknown runtime error". Even running they handy script debugger didn't give me any more information as to why .innerHTML would cause this sort of thing.

After much searching and much testing, I was forced to just destroy the table and use innerHTML on the parent DIV to recreate it.

What a pane... it's no wonder my boss made the early decision to only support FireFox for the administrative side of our software... too bad we can't do the same with the public side .

Firefox 3 launched today!

I welcome with open arms the arrival of FireFox 3. It's pretty, it's quick, and it successfully passes the Acid2 test!

So far, I have found only minor CSS corrections that need to be made for FF3 to work correctly on my many web sites.

I'll report more on my findings as I have more time to work with the newest version of FireFox.

The glorious "Adjacent Sibling Selectors"

Ahh, how I love CSS... It truly makes life wonderful! Today I found what I consider to be one of the more elegant of CSS selectors... the "Adjacent Sibling Selectors".

Basically, using the syntax: "E1 + E2{ }", tells the browser to match for the element E1 and E2 within the same parent, directly following each other. It then only applies that style to E2.

For example:

<style>
b + i {font-weight:bold;}
</style>
<span>The <b>Quick</b> <i>Brown</i> <i>Fox</i>

Would render like:
The Quick Brown Fox

instead of:
The Quick Brown Fox

Notice how "Brown" is bold and italicized and "Fox" is only italicized... this is because "Brown" is the child to <i> that is a direct sibling of Quick's <b> while "Fox" is a child to <i> which is a direct sibling to Brown's <i>.


Why would you ever want to do this? Anytime you want an element to act differently only when preceded by a specific element.

For instance, if you have a H1 (Header 1) followed by an H2 (header 2), you might want the H2 to be vertically closer to the H1 than it would be anywhere else on the page. You can accomplish this by simply adding H1 + H2 {margin-top: -5px} to the style sheet.

For more information, check out the W3 specification.