When we were getting ready to launch the LivableStreets website earlier this year, I ran into an odd renderbug which I’ve finally had time to write up. The issue I found was that Internet Explorer would cut off portions of an element when negative margins caused it to extend beyond its parent.

An example will probably help make the issue more clear.

The structure we’ll use is simple. A “container” div wth an explicit width will contain all our content. Each test case will be a “holder” div, which contains the paragraphs with negative margins to pull them beyond the boundaries of both parent elements.

In a standards-compliant rendering, elements can be caused to extend beyond containing elements, through the use of negative margins:

Internet Explorer, of course, plays by different rules. Let’s start by looking at IE6:

When no width is set for the holder div, the paragraphs with negative margins are shown to extend beyond their holder div, but are clipped at the edge of the container div. However, when we explicitly set the width of the holder div to 100%, the paragraphs are clipped at the edge of the holder div – they’re not allowed to extend past any of the containing elements (more correctly, the content does extend past, but it’s inappropriately truncated, as though overflow: hidden; were declared on holder divs).

The same results are obtained in our second result set. When we declare the width in pixels, the paragraphs are clipped at the edge of the holder div. When we explicitly declare the width to be auto (same as the default property for block-level elements), content is clipped at the edge of the container div:

With Internet Explorer 7, we get yet another curveball. IE7 does properly honor the negative left margin in all cases, regardless of whether (or how) we declare a width for the holder div. The right negative-margin isn’t so lucky. It still gets truncated exactly the same way as IE6:

It’s almost like the dev team created a unit test for left negative margins and decided they were all set.

To their credit, the IE8 team has fixed right negative margins, based on the current beta:

So, if your site has sizable numbers of IE users (which, I think, is most of us), be aware that negative margins can cause unexpected consequences. Explicitly declaring overflow: visible; on holder and container has no impact on the resulting page renders. For the LSN launch, I ended up using relative positioning to achieve the desired affect.

Have a different workaround? I’d love to hear about it. In the meantime, here’s the testcase I put together.