IE7 ignoring margin in a div following an absolute positioned div

Question

I have two divs inside a container, the first one has absolute positioning. In ie7, the second div apparently ignores the top margin. Padding seems to work fine, but for visual reasons I have to use margin.

I know the culprit is the absolute positioned div because if i remove it the following div works fine.

This is only happening in ie7 (not even in ie6).

Help!

Edit: I just found a solution which consists of giving the parent div padding-top just for ie7. So I would just like to know why does this happen, and if there is one, a cleaner solution, but I dont need more dirty hacks..

Answer 1

Hey,

This is what we call margin collapsing. You could try to positioning the second div too.

You could find more information about margin collapsing.

Just check the conditions below if you have any of them in your code before start reading the whole article.

BODY elements never take part in margin collapsing, since they are considered magical, which means sometimes a strange gap does not show up in Internet Explorer when it does in other browsers, when the collapse happens with the top of the BODY. This is usually easy to solve; just prevent the margin collapse for the other browsers, and it works in Internet Explorer too. (Note that the HTML element's margins never collapse in any browser, this is correct behaviour.)

In rare cases, margin collapsing where an inner element has a bottom border and an outer container has a bottom border, can cause the background of an intermediate element to spill into the container in Internet Explorer.

The more problematic bug is caused by Internet Explorer's strange hasLayout behaviour. This is a fundamental bug in Internet Explorer 7- and affects several other things as well, but this article will only deal with margin collapsing. Setting certain styles on an element makes it "have layout" (a concept unique to Internet Explorer, and not compliant with any standards). The most common style that causes a problem is width. When an element hasLayout it suddenly assumes a minimum height of 1em, and if set to something less in Internet Explorer 6, such as 0.5em, it still uses 1em.

An element has layout when one of the following conditions is true:

    * It has a width and/or a height specified
    * It is an inline-block (display: inline-block)
    * It has absolute positioning (position: absolute)
    * It is a float (float: left, float: right)
    * It is a table element
    * It is transformed (style="zoom: 1")

Height usually does not cause a problem, since setting height will prevent collapsing in other browsers anyway. However, triggering hasLayout on a nested element where the parent has prevented margin collapsing using borders or padding, can cause margins to disappear, or to collapse through the parent irrespective of the padding or borders. Generally, hasLayout is a mess, and it is best to avoid it in places where margins are critical.

I hope this will help you to go through with your problems.