Submitted to me by Anonymous, an excellent rant about Internet Explorer.

Turning on a cell’s borders on mouseover should be easy, right? You should be able to give the cell a class, like “selected” and in your CSS specify that td.selected has borders. Then on mouseover, you can add the selected class to the cell.

Except that everything jiggles around. No one wants that – but wait, just give all the other cells a 1px border of “none”, right? Or “transparent” color? Sorry, no luck. IE won’t let it work (to be fair, I’m not sure if FF will either). So you’re resigned to setting the other cells borders to the background-color. It feels dirty, but at least it works.

Actually, it doesn’t. You see, the browser can’t read your mind, it doesn’t know which borders take priority. Enter the border conflict resolution spec, a beautiful piece by the W3C. Just give the background-colored borders a lower-priority style (dashed or dotted) and the solid borders will override them!

Except in IE. Because IE hasn’t bothered to finish implementing the border conflict resolution spec. No, I’m not talking about IE6 – this is broken in IE7. And it appears to still be broken in IE8. So I had to resort to a browser-specific javascript hack that adds a new “prevSelected” class to the cell before the selected cell – just to make IE happy.

And no, “border-collapse: separate” didn’t work as a work-around because the corner pixels showed through.

</rant>

Well said Anonymous, +5 insightful.