Why doesn't Internet Explorer render this page smoothly?

Question

Have a look at this page in IE 8: http://labs.pieterdedecker.be/hetoog/layout.htm

It looks okay at first, but try hovering over an item and then taking your mouse off the item grid again.

Before

After

Notice how there's a black border on the right of the yellow item. Also, the font looks different.

How can I fix this?

Answer 1

I would put all my money on that it's due to your table based layout... try using DIVs instead.

here's a rough example of replacing all your tables/cells with divs:

http://jsbin.com/akido/

test it in IE8 and you'll see you no longer have the altering issue...

Answer 2

CSS Reset

Answer 3

You should try removing the table-layout:fixed property assigned to table.grid in your CSS, I read somewhere that can cause bugs in IE8. (Should be unnecessary since it looks like you've assigned widths to each td.)

As an aside, you should really consider using more dividing things up into more than one class in the future. Instead of try so you can write CSS like td.note{} instead of td.brownnote, td.greennote, ...{}