How to fix position:absolute disappearing in ie

News 02-Sep-2011 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.

Write to us

or call the number 020 8446 1515


    By contacting us through this web form you agree to our latest GDPR compliant privacy policy, which you can read here.

    Success!
    Data sent. Our manager will contact you shortly
    Benefits

    There is no shortage of web design agencies in London, so why Active Webdezign Ltd? What can we bring to your web design project that we believe our competitors can’t match? The following are our pledges to you, and the reasons we believe that we make the ideal development partner to turn to if you are considering a new website.

    Industries

    In our 20 years of being in business we have been honoured to take on web design projects from a very wide variety of different clients. These include such spheres as in B2B, HealthTech, e-Commerce, retail, education, etc. We could go on.