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.
- Emil Stenström
- 4 Sep, 2006, CSS
Feel free to leave a comment, or subscribe to my feed.
linkback
These people have linked to this article:
- Lightbox feature added to JaS - JavaScript Slides - Robert’s talk 15 Sep, 2006
- Alpicola’s Development Chronicle :: Negative Margin and Positioning Bugs 5 Oct, 2007
- IE6 resize bug position: relative becomes fixed | Absolute Blog 8 Apr, 2008
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.
