Internet Explorer’s Empty Block Bug

In Internet Explorer, an empty block-level element can affect the display of the first line of text in the next block-level element. This bug is known to occur in IE6/Win. If you have seen it in other versions of IE, or can confirm it doesn’t occur, please contact me. The examples on this page all use <div>s, but work for any block-level element.

In Internet Explorer the first line of text in the <div> below appears on the background colour set for the previous <div>. This happens if the first <div> is empty and if the second <div> has its border set to something other than ‘none’. The height of the coloured area depends on the font size of the second <div>, and not of the first <div>.

First example. This sentence should be long enough to cause the text to take up more than one line, unless you’re using a very small font or a very big display. The following code was used: 
<div style="background-color:#ccf;"></div>
<div style="border:solid;">
  [...]
</div>

If you wrap the text in another <div> (shown in the second example, below), the background colour for the text disappears, but it still shows in gaps in the border (the border in the example is set to ‘dotted’, but appears solid at the top).

Second example. This sentence should be long enough to cause the text to take up more than one line, unless you’re using a very small font or a very big display. The following code was used: 
<div style="background-color:#000;"></div>
<div style="border:dotted;">
  <div>
    [...]
  </div>
</div>

If you set a margin on the empty <div> (shown in the third example, below), the background colour for the first line of text also has this margin on the left and right. Note that the margin is relative to the outside of the <div>, ignoring borders.

Third example. This sentence should be long enough to cause the text to take up more than one line, unless you’re using a very small font or a very big display. The following code was used: 
<div style="background-color:#ccf;margin:4em;"></div>
<div style="border:0.5em solid;">
  [...]
</div>

This bug isn’t particularly serious (don’t use empty block-level elements), but curious nevertheless.

This article was last edited on 9th April 2007. The author can be contacted using the form below.