IE6 resize bug (position: relative becomes fixed)

One bug kept popping up on the sites I built, and I was almost going insane. The bug I’m talking about is specific to Internet Explorer 6 (IE6) and has to do with what happens when you resize the page. Here’s an example page showing the bug. Open it in IE6 and try resizing the window. Let me explain:

[Update: Paula comments that IE7 beta 2 has the same problem. Thanks Paula.]

Setting up the IE6 resize bug

To see the bug in action you need two things: You need to center your page using the body element and you need to be using a fixed width (not percent) on the element. If you use this you will quickly notice that all elements you set position: relative on, will stay fixed on the page when you resize the window. They behave as if you just set position: fixed on them, but only until you reload. It’s really a fun effect (if you know the fix).

Example code:


body {
margin: 0 auto;
width: 760px; /* Any fixed or fluid width */
}
/* Affects all elements with position: relative; */
#example p {
position: relative;
}

Here’s a live example of the IE6 resize bug with borders added for clarity.

The bug is kinda rare you could say. But using body for centering is a great way of getting rid of one extra container div, so I have been using it more and more lately (IE5 can’t handle that, but you don’t support it do you?). Anyway, not being able to use position: relative is not ok.

Making things behave as normal again

Fortunately the fix is very easy. You simply add position: relative to the body element. *Blam* All previous broken elements start behaving like expected again. Here’s the same example with the bug fixed.

That’s a couple of hours less IE6 adoption time on my next project. I hope it helps someone out there too.

75 responses to “IE6 resize bug (position: relative becomes fixed)

  1. Cool. Thanks for the write-up. Imagine can be frustrating to deal with this one if you don’t know a solution yet.

    So, besides this one, have you encountered other problems in container-divless layouts? I always used a container div because of the IE5 problems, but since it’s time to leave that one behind I might go divless as well.

  2. @matthijs: Nope, no other problems. I sometimes use both html and body and add background images and widths to both, and even that can work well. I recently wrote a writup on the KTH website. That one uses styling on both html and body. Thanks for your comment!

  3. Thanks for your answer Emil. I’l be using the wrap-divless technique in a redisign in which I cannot change the html. Using the body will save me from having to place the rules on lots of other elements.

  4. THANK YOU! Currently I’m doing work for a client where I’ve encountered this exact problem! Tomorrow, first thing I’ll do is test your solution!

  5. Hmm, come to think of, most likely it won’t solve my specific problem…

    I’m using it to create a CSS Scrollable Table with Fixed Header and there I have it to emulate a fixed positioning.

    When I add position: relative; to any of the parent elements to the one that acts fixed, the bug goes away (i.e. it doesn’t have to be the body element) but then I also lose the the effect of a fixed header…

  6. @Robert Nyman: Setting it to a parent element made that element become “fixed until reload” in my examples. I’m afraid I don’t have any experience from the fixed thead example you link to, all I know is that IE is very bad at redesigning table elements.

  7. it lacked to say: this same error in the IE7 BETA 2, is corrected with position: relative in body.
    =D

  8. Thanks! It was very useful. Just discovered this bug and spent 30 mins trying to solve it, but accidentally found your site!

  9. I ran into this problem as well, but putting position:relative on the body tag didn’t fix it for me.

    I think it is because I had a table and table cell with align=center on the page. After I put position:relative on the element inside the centered table cell, it worked.

    Thanks for pointing me in the right direction.

  10. @Brian: Yeah, I’ve noticed that too, this does not work for all cases. You shouldn’t use the align attribute though, it’s design and should be in the CSS (text-align: center).

  11. I was so happy to find this post – i have that same exact problem… only thing is – your patch didn’t solve the problem for me.
    Do happen to have any other helpful ideas / directions ?
    10x,
    Ido

  12. Thank you Emil for the fix. I tried it and I am having trouble with it. Is there anything else than positon: relative; to add to the CSS body?

  13. Wow, I actually developed a technique for NOT using position relative because of this problem – although it caused great frustration. I was amazed that this works perfectly in IE7 (don’t have 6 to hand). I can’t wait to start using this again! Thanks!

  14. OMG! Thank you so much, this was driving me insane!!!!!! easy fix indeed!

  15. Thanks a lot for the tip, i just wasted 5 hrs fixing it and i am sure i would have never tried this fix on my own!!!

  16. Pingback: Alpicola’s Development Chronicle :: Negative Margin and Positioning Bugs
  17. Appreciate your sharing the fix. I was pretty freaked out when I just discovered this bug, but thankfully Google led me to your page. Thanks again!

  18. Thanks very much! Such an easy fix! Wish I’d read your blog before tearing the remainder of my hair out!

  19. Awesome! Thanks for the post. But looks like you need it for your website itself. I resized the window on this article and it was not snapping into place… tsk tsk.

  20. Hi dude,

    This page was first hit on google when searching for “ie6 position resize” and fixed my problem instantly – thanks a lot :)

  21. This bug was driving me nuts until I found your fix – and as an aside – I found this bug was in effect in IE 7 as well (but my page rendered fine in Firefox and Safari, which was what had me stumped). THANK YOU.

  22. You’re my hero of the hour! I was going nuts wondering why it was doing that in IE for a site I’m developing. I found this article after Googling the problem – tried the solution, and it works. I hate IE, but without it I’d bill a lot less hours when developing a site.

  23. This is just what I have been looking for as part of a multiple solution to an IE and Firefox bug. I am toggling between two divs that both contain different text. The first fix was to make sure that position:relative was put into the text layers so that they would inherit their proper z-index from their position in the code. The second fix is this one described on this page, so that those relatively positioned divs will move correctly on page resize for both IE and Firefox. Thanks all.

  24. Thanks for the article. I was facing the same concern on one of the web pages I am working on right now. Since I am from Java/J2EE background, I don’t work on CSS so much.

    Thanks again.

  25. Thank you so much, friend! This has been driving me nuts for two days now. Your solution fixed EVERYTHING. You so rock!

  26. You have restored a 68yr old man’s faith in human nature with your generosity in sharing this fix!!!

  27. Thanks Emil! Interestingly, this bug was more a problem for me in IE7 than IE6 (I have all kinds of position values going on). You helped me end my day on a high note!! Thanks again.

    Jon

  28. You sir, just spared me a lot of trouble. Our website will hopefully be updated tomorrow without this problem, if you hurry you can still see it today (shows up in the “Featured Products” section).

  29. Was going crazy trying to fix the problem, im using so much time just for trying to keep the same look on ie as on all the other browsers. hate ie. thx alot for the help

  30. Emil. You the man — even 2 years after posting this article. Had a client project and this came up. Was baffling and only occurred with IE-type browsers. Opera, Safari, FF — they all worked fine. It’s sad that even IE7 final version has this glaring bug. And I’m sure that bug report will fall on deaf ears at Microsoft. Your fix set me straight.

  31. I just spent the last day and half trying to squash this bug. Thanks for posting about it. My frustration level just dropped a bunch.

  32. You are the freaking man. I’ve been having issues with a very important client and this helped out so much. I knew it was the relative positioning but I didn’t know the fix. Thanks for NOT keeping that to yourself.

  33. @Aaron, Smitty: Thanks for taking the time to thank me! :) I was in your exact position and was force to reverse-engineer a fix. I thought I might as well post it here.

  34. Thanks for the post. I ended up having to use absolute positioning to get my div in the right place- but I appreciate the info.

  35. DUDE. i have been freaking out with this pathetic ie6 bug for so long now…bashing my head against a mined spiked poisoned wall for ages trying to understand why setting position to relative or absolute was behaving as fixed in my scrollable div.

    the solution was simply to set the containing element to position:relative. so simple yet impossible to guess.

    thanks man. you’ve really saved my life as i was about to go jump in front of a semi-truck just to finally achieve peace of mind.

  36. Thank you, thank you, thank you.

    This hack saved my neck… my customer was killing me and I didn’t know how I could fix it.

  37. Thanks for posting Bro!

    This has been driving me nuts for the last month.

  38. Thanks so much! Being a non-professional, and facing so many bugs in IE at the onset of the project left me desperate at times.
    Lucky I came across your page!

  39. Emil !!!

    THANK YOU! THANK YOU!! THANK YOU!!!!

    Had noticed this issue in some websites but was not aware I was a victim of it. A client just sent me an email complaining about this.

    Thanks again for your excellent documentation.

  40. Thanks for posting the answer to this problem, it would have caused a lot of brain-ache if I didn’t stumble across this post. I’ll be writing a post about this problem in the near future linking back here :)

    Thanks again

  41. Thanks very much for posting this — so simple to fix, but so very frustrating if you don’t know how! I can’t understand how an operation the size of Microsoft can still put out a product that fails to meet basic standards. mindblowing. Cheers!

  42. All these bugs are a pain in the bum!
    it’s good to be informed about them.

  43. I can not believe it. Your post is three years old and the bug is still not fixed. I got the very same problem. Thank you for the solution!

  44. BEWARE: this fix may have side affects to existing sites! My site wasn’t able to show thickbox popups any more in IE6, after I had added position:relative to the body element. So it is’t the solution for me… :(

  45. Pingback: [?]IE6????????IE6? 25+ Bugs - vfresh
  46. Thanks for you effort to help.
    But it did not work out for me.

    However, I got a solution by giving a fixed width (in px) to the parent div of problematic (those moving with resize) elements.

  47. Pingback: Clearboth(Test Site) | Blog | IE6 ?? ???: IE6 ?? 25+ ???? ??
  48. Pingback: [?]IE6???????IE6? 25+ Bugs | ??
Comments are closed.