May 8, 2006
Fixed positioning within Internet Explorer 6
In the April 25th edition of the Practical Web Design magazine podcast (OK, I’m just catching up with my podcasts), Paul Boag talks about keeping an item fixed on the page when scrolling the main page content. As he says, this can be a lot easier to show than describe, so you might want to jump straight to the working example created for this post.
Paul describes how this effect is very easy to achieve (using the position: fixed declaration) in pretty much every browser except one: Internet Explorer 6 (obviously versions 5.x too). He goes on to say that in order to get around the problem, you need to do three things:
- add an extra container around the scrollable content,
- place the non-scrollable item outside this container, and
- make the
<body>itself, non-scrollable
He also highlights an article from last year at Sitepoint that utilises Javascript to fix IE by adding the extra container to the content, just so that the nice browsers don’t have to get this extra little <div> markup.
Personally, I’m not so sure that I agree with their statement that adding an extra <div> is more likely to hinder than help
the browsers that don’t require it, so I’ve set up this quick’n'easy ‘how to make position:fixed work within IE‘ page. The menu is sized using ems, so it will grow or shrink depending on browser preferences (oh, and if you’re worried about the horizontal scrollbar that appears when you really whack the text size up, don’t - it’s caused by the HTML/CSS shown on the page!)
And one other thing, I have to recommend Paul’s excellent weekly Boagworld podcast - not so much ‘teccy’, more a little tetchy (sorry Paul, the old pun gland’s gone to sleep!!)
