Internet Explorer IE 5 - 6 position:relative float bug.
jeffd
Status: Assistant
Joined: 04 Oct 2003
Posts: 594
Reply Quote
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.

:: Code ::
// CSS
.quote, .code {
   margin:.3em 25px 0 25px;
   padding:.2em .2em .2em .4em;
   position:relative;
   font-size:.95em;
   z-index:2;
}
.quote {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#050612;
   background-color:#E8EFF7;
   border:1px solid #45688B;
}
.code {
   font-family:'Courier New', Courier, sans-serif;
   color:#34FC34;
   background-color:#000;
}
.quote-a, .code-a {
   float:right;
   width:auto;
   font-size:11px;
   font-weight:bold;
   padding:0 1px;
   margin:-1px 0 0 .3em;
   font-family:arial, sans-serif;
   line-height:1em;
   z-index:12;
}
.quote-a {
   background-color:#fff;
   color:#0d83b1;
   border:1px solid #60b6d3;
}
.code-a {
   color:#FD5502;
   border:1px solid #FD5502;
}

// HTML
<div class="code">
<div class="code-a">:: Code ::</div>
</div>


A very very poor showing by IE 6.
Back to top
jeffd
Status: Assistant
Joined: 04 Oct 2003
Posts: 594
Reply Quote
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 :
:: Code ::
// CSS
.quote, .code {
   margin:.3em 25px 0 25px;
   padding:.2em .2em .2em .4em;
   /*
   position:relative;
   */
   font-size:.95em;
   z-index:2;
}
.quote {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#050612;
   background-color:#E8EFF7;
   border:1px solid #45688B;
}
.code {
   font-family:'Courier New', Courier, sans-serif;
   color:#34FC34;
   background-color:#000;
}
.quote-a, .code-a {
   float:right;
   width:auto;
   font-size:11px;
   font-weight:bold;
   padding:0 1px;
   margin:-1px 0 0 .3em;
   font-family:arial, sans-serif;
   line-height:1em;
   z-index:12;
}
.quote-a {
   background-color:#fff;
   color:#0d83b1;
   border:1px solid #60b6d3;
}
.code-a {
   color:#FD5502;
   border:1px solid #FD5502;
}

// HTML
<div class="code">
<div class="code-a">:: Code ::</div>


Quoting from Eric Meyer's Cascading Style Sheets: the definitive guide from O'Reilly press:
:: Quote ::
When you relatively position an element it immediately establishes a new container block for any of its children. This containing block corresponds to the place where the element has been positioned.


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
Display posts from previous:   

All times are GMT - 8 Hours