Cube2Media

I was working on a project for a client when i came across a bug in IE dealing with absolutely positioned elements. I thought i had been down this road before, but apparently not. So i hope this helps others who have been given the task of making things work and coding things twice because they have people that use IE… Wait?… Thats probably all of us, at least in the real world. Everyday it seems my job is made more difficult because certain companies decide to build based on there own ideas vs the greater good of all.. Im not saying they dont have the right, but i can say Damn you Microsoft!!

Absolute positioned elements bug in IE

this is my basic code:


<div class=“main_content”>
    <div class=“shtl”></div>
    <div class=“shtr”></div>
    <div class=“shbl”></div>
    <div class=“shbl”></div>
    <div class=“inner_left”>
    …
    </div>
</div>


pretty simple. And the css

.main_content {
    position: relative;
    width: 900px;
    height: 500px;
    padding: 20px;
    float: left;
}
.shtl, .shtr, .shbl, .shbr {
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(‘images/screwhead.jpg’);
}
.shtl {
    top: 5px;
    left: 5px;
}
.shtr {
    top: 5px;
    right: 5px;
}
.shbl {
    bottom: 5px;
    left: 5px;
}
.shbr {
    bottom: 5px;
    right: 5px;
}
.inner_left {
    position: relative;
    float: left;
}

All this is trivial. Except in IE. The problem i was having was my screwhead divs would disappear. In FF, Safari, Chrome, and Opera they all appeared where they were supposed to be, in each corner. But in IE they would disappear completely. One might think that they would maybe appear on the page but in some weird spot. NOPE GONE all together. when you inspect the source the divs would be there, but not in view.

Thank god for google, and other posts like this one.

It turns out that in IE when you absolutely position an element and its preceding or the following sibling of a float. So as you can seen from the code above. Not only is the parent element floated, but the div following the positioned screwheads is also floated. DAMN YOU Microsoft!.. Hence the reason for my divs to disappear. but i found out that the fix is simple, and stupid. by putting something between the AP elements and the floated elements, it allows them to come back into view and appear like they should.

This is what i did:

<div class=“main_content”>
    <div>
        <div class=“shtl”></div>
        <div class=“shtr”></div>
        <div class=“shbl”></div>
        <div class=“shbl”></div>
    </div>
    <div class=“inner_left”>
    …
    </div>
</div>


Easy. Simple and Stupid.

Hope this helps someone else.