In all the following test cases there is a gray box (with darker border) having overflow:auto, position:relative and containing a green child with some vertical margins. (There is no overflow, so no scrollbars show up, but that's not relevant to the problem.)

In this first case there are no other elements. All is correct.

In this second case the green child is followed in the source by an absolutely positioned sibling (the small red square). In IE8b1 the bottom margin of the static child is doubled. The problem occurs also when the parent box has overflow:scroll (instead of auto.) Size and position of the absolute box do not seem relevant (if this box generates overflow this is not correctly managed, but this is a different problem.)

In this third case the absolutely positioned box precedes in the source the static sibling. The margin duplication problem does not occur, and IE8b1 rendering is correct. In IE7- the top margin of the static child is lost.

CSS tests home