IE/Opera Floats with block elements not aligning

Typical code, all test on Windows XP.


<div class="wrapper">		<!-- outer wrapper -->
	<div class="floatleft">div floated left</div>
	<div class="wrapper">	<!-- inner wrapper -->
		<p>2a. Paragraph</p>
	</div>
</div>
 
div floated left

1a. (inner wrapper with top margin of 20px)

Passed: Gecko 1.7~1.9, Opera 9.50 and Safari 3 (shows collapsing margins between outer wrapper, inner wrapper and paragraph)

Failed: Opera 9.1~9.2, IE5.5, IE6 & IE7 (IE5.5 shows the pee-ka-boo bug)

div floated left

1b.

Passed: Gecko 1.7~1.9, Opera 9.50 and Safari 3 (shows collapsing margins between outer wrapper and paragraph)

Failed: Opera 9.1~9.2, IE5.5, IE6 & IE7 (IE5.5 shows the pee-ka-boo bug)

div floated left

2a. (outer wrapper with orange top border of 2px and inner wrapper with top margin of 20px)

Passed: Gecko 1.7~1.9, Opera 9.1~9.5 and Safari 3, IE5.5, IE6 & IE7 (shows collapsing margins between inner wrapper and paragraph)

div floated left

2b. (outer wrapper with orange top border of 2px)

Passed: Gecko 1.7~1.9, Opera 9.1~9.5 and Safari 3, IE5.5, IE6 & IE7

div floated left

3a. (inner wrapper with green top border of 2px and top margin of 20px)

Passed: Gecko 1.7~1.9, Opera 9.50 and Safari 3 (shows collapsing margins between outer wrapper and inner wrapper)

Failed: Opera 9.1~9.2, IE5.5, IE6 & IE7 (IE5.5 shows the pee-ka-boo bug)

div floated left

3b. (inner wrapper with green top border of 2px)

Passed: Gecko 1.7~1.9, Opera 9.1~9.5 and Safari 3, IE5.5, IE6 & IE7

div floated left

4a. (outer wrapper with orange top border of 2px and inner wrapper with green top border of 2px and top margin of 20px)

Passed: Gecko 1.7~1.9, Opera 9.1~9.5 and Safari 3, IE5.5, IE6 & IE7

div floated left

4b. (outer wrapper with orange top border of 2px and inner wrapper with green top border of 2px)

Passed: Gecko 1.7~1.9, Opera 9.1~9.5 and Safari 3, IE5.5, IE6 & IE7

div floated left

5a. (inner wrapper with top margin of 50px)

Passed: Gecko 1.7~1.9, Opera 9.50 and Safari 3 (shows collapsing margins between outer wrapper, inner wrapper and paragraph)

Failed: Opera 9.1~9.2, IE5.5, IE6 & IE7 (IE5.5 shows the pee-ka-boo bug)

div floated left

5b. (outer wrapper with top margin of 20px)

Passed: Gecko 1.7~1.9, Opera 9.1~9.5 and Safari 3, IE5.5, IE6 & IE7 (shows collapsing margins between outer wrapper, inner wrapper and paragraph)

In IE/win some cases show the IE Margin Transference Bug. Opera 9.1~9.5 is showing another bug ...

Relating bug

div floated left
div floated left

6a.

Passed: Gecko 1.7~1.9, Opera 9.50 and Safari 3

Failed: Opera 9.1~9.2, IE5.5, IE6 & IE7 (IE5.5 shows the pee-ka-boo bug)

div floated left
div floated left

6b. (outer wrapper with top margin of 20px)

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

Failed: IE5.5, IE6 & IE7 (IE5.5 shows the pee-ka-boo bug)

Original Test.