Thursday 6th August 2009

Internet Explorer 8 CSS Bugs - "display: table"

Over here at Invent towers, we've been running into quite a few IE8 rendering inconsistencies over the last few days, mostly relating to CSS margin collapse rules.

We've also encountered a few cases where IE has got it right, but Gecko has got it wrong. We'd like to share one with you now.

CSS display: table

"Specifies that an element defines a block-level table: it is a rectangular block that participates in a block formatting context."

So let's have a look at the markup below:

<div style="background: #FF0000; margin: 0; height: 200px; width: 200px; display: block;">
    <table style="background: #00FFFF; margin: 30px; height: 100px;">
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

In Mozilla Firefox and Internet Explorer 7, we'll see the following:

In Internet Explorer 8, we'll see:

(Apple Safari will also render the markup as above)

Note the top margin of the <table> has been collapsed into the the <div>, and the <div> now displays the margin.

IE8 CSS Bug or Feature?

Interestingly, if we add "display: block" to our <table> style attribute, the margin is collapsed in Firefox and IE7, just as in IE8 and Safari, but adding "display: table" has no effect at all on any browser's rendering interpretation. This suggests that Firefox and IE7 are treating "display: table" differently that "display: block".

We would have to conclude that Firefox is in the wrong here. The margin should collapse. However, opinions may vary. If you think differently, let us know.

“ Invent Partners supported my cycling event with a stylish website, intuitive CMS and flexible and responsive ecommerce system. Thanks to their hard work and patience, my event sold out in hours, with riders praising the easy to use event entry system and customer service. Many thanks! ”
Danial, London Edinburgh London

Contact Us