How to fix position:absolute disappearing in ie

Posted on

Estimated reading time: 1 minute, 55 seconds

If you’ve experienced this problem (position:absolute disappearing in ie) you are probably ready to pull your hair out. It is completely random, sometimes it disappears sometime it appears. It works in IE6 but not 7 then on another computer it works in 7 but not 8 and 6.

So what is the problem?

Have a look at this header:

Example

In this example what I wanted was a logo (1), a registration/checkout area (2), a navigation (3) and a search form (4). The HTML elements are coded in the order indicated above. I’m happy with my markup, happy with how everything looks until I start testing in IE… Both (2) and (3) are completely missing.

Turns out this is caused by a bug in IE that hides any element position’ed’:absolute’ly’ if it’s coded directly before or after a floated element. – Because that makes perfect sense! But to give you even more of a headache that doesn’t necessarily trigger the event, you need another variable to make it go “poof”. The time it takes to load your content, files and rendering of your page. I know it’s mad.

Anyway, we now know what is happening; IE is behaving just like IE wants, again… Luckily there are a few ways of fixing this.

How to fix position:absolute disappearing in ie

Remove the float on (3)

Absolutely right, that does solve the problem but unfortunately in my case created another 2 problems, so let’s try something else.

Can’t you add a static <span> or <div> in between?

I can’t believe you just suggested I clutter my markup like that. Next!

I figured it out! add  a clear:both on (4)

Brilliant, it’s back; but what about (2), it’s still missing…

I give up, screw you IE!

I don’t blame you, I felt the same way until I found this

{display:expression(style.display = "block", 0);}

Apply it to both (2) and (4) and you are off! If you like me, try to keep your CSS as clean as possible, apply it to an IE conditional CSS file.

If you have any other ways of doing this that might be cleaner please leave a comment, I’d love to hear about it. Maybe you just feel like saying thanks, or still have problems after this. I have a feeling I’ll write a few more of these IE related fixes.

Useful Guides
  1. mitaken says:

    I was stuck on the clear both the 4. 2 still broke grrr

    ありがとう

  2. Rahul says:

    THanks, I’ve been looking for this fix.

  3. Pewee says:

    Great, now let’s just bookmark this!

  4. Rafik says:

    ie is always the enamy tanks for helping fight the evil!

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top