Question

JSFiddle link: http://jsfiddle.net/2JUEJ

What happens when I open the page in IE8 is that, whenever the mouse enters a container DIV (class=tableRow), the hover event of its first child DIV (class=tile/wideTile/longTile) fires. Works fine in Fx. I have tried using event.preventDefault(); in the parent’s hover event, but that doesn’t fix it. Any clues?

Answer 1

The combination of float:left and display:table-cell on the .tile class is incompatible. Setting float automatically sets the display to block. Take a look at the computed style in Chrome or Firebug/Firefox.

It might even be the case that floating the table-cell is actually causing the browser to generate anonymous table objects which is causing the rendering error in IE8. I guess Chrome/Firefox are interpreting the incompatibility differently.

Removing display:table-row causes IE to render the cells slightly better in that the first cell’s hover event is no longer triggered when hovering over other row children. However this breaks the intended layout, therefore I recommend using a new approach.

First remove all the display:table-* rules since everything is floated (which as I already said sets display:block) and since everything is floated, each table will need a width, otherwise all the elements will sit horizontal to each other. For example I tried 420px on the .table class.

See demo.

Note: Personally I would go one better and remove the floats completely and just use a combination of display:inline-block;vertical-align:top and possibly some positioning, since floating generally requires extra rules and/or markup to clear (and I’ve never liked CSS float!)

Other questions that you might helpful explaining parts of this answer:

• IE7: How to make TD float?
• float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
• Floating table cells in IE7