This CSS technique demonstrates how to set fixed positioning for elements in Internet Explorer 6 without compromising absolute positioning. View the example of using position fixed IE6.
A Better Fixed Positioning for Internet Explorer 6
Fixed positioning has always been a nuisance for web designers because of the lack of support for it in Internet Explorer 6, but I've come up with a solution that allows for cross-browser fixed positioning that doesn't come at the large costs that other techniques result in. If you've been on the hunt for a way to get elements with position: fixed; to work properly in Internet Explorer 6, undoubtedly you've noticed that most methods come at the expense of absolute positioning or resorting to scripting. Mine does not.
View the position fixed IE6 demonstration.
Use this on your own project
- * {
- margin: 0;
- }
- html, body {
- height: 100%;
- overflow: auto;
- }
- .wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- overflow: auto;
- }
- .box {
- position: fixed;
- left: 10px;
- top: 180px;
- }
- * html .box {
- position: absolute;
- }
In your HTML, place <div class="wrapper"> around all of the content in your page, except for any elements that will have fixed positioning.
- <html>
- <head>
- <link rel="stylesheet" href="layout.css" ... />
- </head>
- <body>
- <div class="wrapper">
- <p>All of your website content should be here.</p>
- </div>
- <div class="box">
- <p>This box is fixed.</p>
- </div>
- </body>
- </html>
The CSS * html hack
Due to the nature of this workaround, any element that will be fixed needs to be absolutely positioned in IE6. The best way to do this is using the * html hack. Simply follow the format of lines 19-21 in the CSS above.
Troubleshooting
Elements are above the scrollbars, how can I fix this?
Unfortunately, this is how the code works, and browsers are rendering the page you're using this on the way they should. You'll have to use your creative judgment to come up with a solution that fits your design.
I don't know web design. Can you help me with this?
I charge by the hour; drop me a line and we'll discuss pricing.
