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!
And no, “border-collapse: separate” didn’t work as a work-around because the corner pixels showed through.
Well said Anonymous, +5 insightful.