I found another bug, I first noticed this in IE 5.5, but it's also present in IE 6x.

This one is easy to demonstrate:

If you want to see the bug in place, simply cut and paste the code from the first posting into an html document, or if you're lazy, here's a sample.

Please note also, this issue is not related to doctype declaration, it happens with or without doctypes.

The code is simple:

a div tag with a border, no width declared. Inside there is a small floated div tag, width:auto, float:right. Top border disappears on the 'quote' div box. Also on the 'reply' and 'new topic' buttons, border top disappears. IE 6 is looking very very weak here.

I double checked to see if this was a right float issue, but the same thing happens with a left floated small box, it goes under the container box.

The real browsers, any one will do, Firefox/Mozilla, Opera, and Safari, they all show the page correctly with position:relative;.

On the sample page, there should be a small orange box floated to the upper right corner, in IE you can just see it's top orange border, unless the box doesn't have enough content, in which case IE ignores the default rule to extend blocks to their containers. Notice also that IE is ignoring the box padding here, and applying the -1px top margin as if there were no padding in the main container box.



A very very poor showing by IE 6.
Back to top

I found the solution, the bug is triggered by 'position:relative;', once that is removed IE again displays the information correctly. But that's definitely a bug, you should be able to use 'relative' in this context :


Quoting from Eric Meyer's Cascading Style Sheets: the definitive guide from O'Reilly press:


Which is exactly what we were looking to do here, create a container element for the float to float inside of. By removing the position:relative we are now hoping that browsers will decide that the container element is in fact the code or quote div, which most appear to do.
Back to top