IE7-/Win Margin Transference Bug - testcase 2

Testing, 27th April 2008.

These tests show an unusual bug seen in IE5/Win up to IE7 when a floated element is followed in the source by a block element with clear and a container has a bottom margin or top margin if the float is enclosed. If the height of the float is roughly equivelent to the height of the content beside the float within the container, then the bug can be toggled on and off by zooming in and out.

Fixed in IE8


<div class="container">
<div class="wrapper">
	<!-- content here and/or --> 
	<div class="floatleft">div floated left</div>

	<!-- here or enclosing the float --> 
</div>
<div class="clear">Clear</div>
</div>

Float preceded by a element and bottom margins

Some text before the float in the source (wrapper has bottom margin of 30px)
div floated left - Height 40px
Clear
Some text in a div before the float in the source (wrapper has bottom margin of 30px)
div floated left - Height 40px
Clear

Passed: Gecko 1.7~1.9, Safari 3 & Opera 9.1~9.5

Failed: IE 5.5~7

Float followed by a element and bottom margins

div floated left - Height 70px
Some text after the float in the source (wrapper has bottom margin of 30px)
Clear
div floated left - Height 70px
Some text in a div after the float in the source (this div has bottom margin of 30px)
Clear
div floated left - Height 70px
Some text in a div after the float in the source (wrapper has bottom margin of 30px)
Clear

Passed: Gecko 1.7~1.9, Safari 3 & Opera 9.1~9.5

Failed: IE 5.5~7

Float enclosed by a element and bottom margins

div floated left - Height 70px
1d. Div enclosing float (has bottom margin of 30px)
Clear
div floated left - Height 70px
1d. Div enclosing float (wrapper has bottom margin of 30px)
Clear

Passed: Gecko 1.7~1.9, Safari 3 & Opera 9.1~9.5

Failed: IE 5.5~7

Float enclosed by a element and top margins

Opera shows another bug with such a set up, see here, Opera margin disappearance bug

Space
div floated left - Height 30px (wrapper has top margin of 30px)
Clear

Passed: Gecko 1.7~1.9 & Safari 3

Failed: IE 5.5~7

Failed: Opera 9.1~9.5

Space
div floated left - Height 30px (container has top margin of 30px)
Clear
Space
div floated left - Height 30px (wrapper and container has top margin of 30px)
Clear

Passed: Gecko 1.7~1.9, Safari 3 & Opera 9.1~9.5

Failed: IE 5.5~7

Another test case is here, IE7-/Win Margin Transference Bug.