Sova v siti (in Czech) > CSS Workshop > IE 5/Win: "moving" margins

IE 5/Win: "moving" margins

(Updated 6/17/02: a new workaround by Micah S. Sittig)

Strange things happen in IE5/Win when an element with the non-zero top or right margin is nested in a DIV, or when a DIV with non-zero padding wraps another DIVs. IE5 seems to implement an unknown and definitely non-standard rule 'margin: overflow' ;-).

Basic example

The example below consists of two consecutive DIVs, each containing one paragraph. The HTML source code looks like this:

<div>
  <p>Lorem ipsum ...</p>
</div>
<div>
  <p>Lorem ipsum ...</p>
</div>

and the output in your browser like this:

In CSS compliant browsers you should see two adjacent blocks, light purple and light green, with no empty space between them and this is what you can see in IE6/Win, Opera 6 and Mozilla. Also there should be 1em high empty space between the text and the horizontal borders of the boxes, because the paragraphs within the DIVs have margin-top and margin-bottom set to 1em.

However, as you can see in the following image, IE 5.0/Win (I don't know about IE 5.5 and IE 4) show paragraphs with no margins and instead inserts a 1em gap between the boxes.

Where are the margins?

The reason, why IE5 shows the gap between the boxes and no margins above and below the paragraphs, is its incorrect rendering of elements in DIVs. In fact, horizontal margins are rendered outside the DIVs as shows the next sample.

In this case, everything is the same as in the first example, but paragraphs, the margins of them were set to zero. Now both IE5 and IE6 show the same picture — two boxes with now empty space between them.

Another DIV — another problem

Unfortunately, setting the margins to zero does not solve the problem. Let's enclose both DIVs in another DIV (marked by the gray background) with non-zero padding. IE6/Win, Opera and Mozilla handle it correctly again, however IE5/Win gets it still wrong.

This time, IE5/Win shows the following picture:

It seems to render the padding of the outer DIV inside the inner DIVs.

Workarounds

Workaround 1

As suggested by Ondrej Ivanic, the latter issue could be fixed by adding an empty DIVs of zero height (<div class="spacer"> in the code extract below) above the first and below the last DIV, so the source code looks like this:

<div class="wrapthem">
  <div class="spacer"><!-- --></div>
  <div class="div2a">
    <p>Lorem ipsum ...</p>
  </div>
  <div class="div2b">
    <p>Lorem ipsum ...</p>
  </div>
  <div class="spacer"><!-- --></div>
</div>

Now the output looks identical both in IE5/Win and IE6:

Workaround 2

(Added 6/17/02)

Micah S. Sittig has suggested a quite simple, yet perfect solution: just set an explicit width for the DIVs, e.g. 100%. I've tried it and it works — see samples below in IE5/Win, or check out Micah's page.

This is the first example. CSS rules are identical, only the declaration width:100% was added to outer DIVs.

And this is the second example with the width:100% added to DIVs (the outermost DIV remains intact).

Your comments and suggestions are welcome at marek@sovavsiti.cz.

Go Top

CSS Workshop home • Recommended reading

© 2002 Marek Prokop. Last update: 6/17/2002. Valid XHTML 1.0, CSS.