Filed under CSS

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.

Feel free to leave a comment, or subscribe to my feed.

related

List some related articles:

You might want to browse all articles.

linkback

These people have linked to this article:

To get a link in this list: make sure your blogging software supports trackbacks or pingbacks and simply link to this article like this:

<a href="http://friendlybit.com/css/ie6-resize-bug/">IE6 resize bug (position: relative becomes fixed)</a>

You can also trackback by copying this link, and pasting it into a trackback field in your blogging tool.

about

Author: Emil Stenström

Emil Stenström blogs about web development. Posts are bi-weekly.

To the about section

comments

What do you think about this article? I’d love to hear your view!

Scroll to comment box.

  1. matthijs 5 Sep

    01

    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. Emil Stenström 5 Sep

    02

    @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. Matthijs 6 Sep

    03

    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. Robert Nyman 6 Sep

    04

    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. Robert Nyman 6 Sep

    05

    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. Emil Stenström 7 Sep

    06

    @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. stefano 7 Sep

    07

    I have to thank you because I also got crazy with this but was not able to find out the bug. Great!
    Ste

  8. Paula 11 Sep

    08

    This bug is not only IE6.

    I use IE7 BETA 2, and I had this problem.

  9. Emil Stenström 11 Sep

    09

    @Paula: very interesting, seems like this fix was needed after all.

  10. Paula 12 Sep

    10

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

  11. Roger Johansson 26 Sep

    11

    The bug is still there in IE 7 RC1, so don’t expect it to go away any time soon. Grr.

  12. Kane 19 Oct

    12

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

  13. Emil Stenström 19 Oct

    13

    @Roger: Damn (but good for this article :) I guess it will be valid a while longer.

    @Kane: Good to know you found it useful :)

  14. Brian 1 Dec

    14

    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.

  15. Emil Stenström 4 Dec

    15

    @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).

  16. Ido Tzang 28 Mar

    16

    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

  17. SAM0077 4 Apr

    17

    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?

  18. Stuart Radley 5 Apr

    18

    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!

  19. Phil 20 Apr

    19

    Thanks! Really helpful.

  20. Terry McGuire 25 May

    20

    You rock!

    This saved me such a headache:
    ie6-resize-bug

    Thank you.

  21. James 2 Jun

    21

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

  22. thomas 12 Jul

    22

    Thank you for this blogentry, it was extremely helpful for me!

    cheers

  23. Vibhore 17 Sep

    23

    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!!!

  24. Peter 16 Oct

    24

    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!

  25. Peter Morris 29 Oct

    25

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

  26. tim 22 Nov

    26

    you are a savior, this has been bugging me for months!

  27. sciontphono 17 Jan

    27

    Really good…I was getting crazy trying to solve this bug…THANKS!

  28. Rodrigo 26 Feb

    28

    Thanks.. your post and examples helped me a lot!!

  29. anonymous 25 Mar

    29

    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.

  30. Nilesh Ashra 1 Apr

    30

    Hi dude,

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

  31. Cas 8 Apr

    31

    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.

  32. Jay 23 Apr

    32

    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.

  33. Emil Stenström 23 Apr

    33

    Hi all, cool to see that you like my little fix :)

  34. kev 7 May

    34

    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.

If you want to you can follow the disussion through a comment feed.

add comment

This is the place where you get to say your opinion about this article, use it well. Formating with HTML is allowed. A red asterisk means that the following field is required.

Comment Form




Comment Form