Go Back to Dynamic Site Solutions :: CSS

Emulating position:fixed in IE6 Without JavaScript

This technique uses 5 of IE5+/Win's Conditional Comments but no JavaScript code. Normally I prefer restricting the use of conditional comments to hiding IE/Win specific stylesheets from other browsers and perhaps giving IE/Win an alternate <object> element. However, I don't like the thought of using JavaScript for a presentational effect like this. Part of the trick is that #navbar is not a descendant of #outer in IE5-7/Win like it is in other browsers. This technique for emulating position:fixed in IE6 is based on the similar technique shown here.

This works in Firefox, Safari, Opera 9+, IE5-7/Win, and IE5/Mac, but there are two things to note: the mousewheel doesn't work in IE5.0/Win and the background-color on #outer disappears in IE5/Mac. (Opera 7.5x and 8.x have problems with the left:auto on #navbar. Oddly enough, it seems to work in Opera 7.23. Opera 7.0x and 7.1x fail to show a horizontal scrollbar when the window is too narrow.)

I should warn you to keep in mind what happens when an element with position:fixed gets too tall — the bottom of it disappears below the bottom edge of the viewport and users can't scroll to see it.

Last update: 2008-05-11

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec scelerisque purus vitae wisi accumsan fringilla. Aliquam nibh elit, imperdiet eu, scelerisque at, condimentum eget, leo. Nam dolor. Etiam rutrum. Nullam nulla nibh, sollicitudin in, dictum ut, ullamcorper id, mauris. Aenean ultricies, erat quis aliquet pellentesque, sapien nulla posuere nunc, sed tincidunt wisi wisi id quam. Donec magna ante, pellentesque eu, posuere sed, ultrices sed, velit. Sed id velit. Quisque sollicitudin lacus a ante. Etiam aliquam. Nulla vitae lectus. Mauris ante neque, blandit id, vehicula nec, iaculis vitae, wisi. Mauris quis elit sed quam interdum sollicitudin. Curabitur congue egestas velit. Nulla feugiat placerat felis. Praesent felis tellus, rutrum et, faucibus eget, sagittis non, ligula. Fusce porta, lorem at convallis vehicula, arcu eros egestas tellus, in bibendum ante metus vel nisl. Sed erat nulla, vulputate vel, fermentum et, feugiat nec, eros. Pellentesque augue tortor, rutrum eu, mattis id, ornare vitae, sapien.

Fusce convallis, odio eu commodo ornare, risus wisi scelerisque lectus, non feugiat sem turpis sit amet velit. Donec a mauris vitae diam mollis dapibus. Donec dignissim ultrices tellus. Curabitur sagittis dictum turpis. Integer accumsan wisi. Proin sodales pellentesque nibh. Nunc ultrices, libero sit amet aliquet egestas, dui wisi vehicula purus, ac ornare pede erat eu arcu. Nunc nec lacus posuere enim sodales luctus. Praesent vitae neque. In wisi nibh, sodales blandit, egestas eu, ultrices at, est. Suspendisse ullamcorper tincidunt sapien. Aliquam ac nisl vitae eros cursus aliquam.

Suspendisse potenti. Donec ornare fermentum nibh. Ut fringilla dolor euismod mi. Curabitur nonummy condimentum elit. Nunc laoreet tortor sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla congue libero vitae urna. In cursus, diam a accumsan aliquam, urna sem aliquet ligula, ac dictum urna risus ut nulla. Cras neque urna, nonummy at, viverra sed, euismod eget, eros. Pellentesque interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus imperdiet, nibh sit amet vehicula tristique, augue nunc commodo leo, sit amet auctor nibh magna non risus. Nulla aliquam ultrices sapien. Donec risus risus, malesuada nec, vulputate eu, volutpat nec, lorem. Nam sed nibh. Duis ultrices. Aenean ut neque. Nam tincidunt odio in mi. Morbi nulla. Cras venenatis sagittis lectus.

Nulla sed sem. Curabitur at nisl non tortor sollicitudin fermentum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sit amet eros. Integer convallis pulvinar enim. Pellentesque pulvinar, enim vitae tempus fringilla, lacus arcu sodales dolor, sit amet sodales dui elit at sem. Ut sed ante. Aliquam erat volutpat. Vivamus consequat, nulla a auctor faucibus, nunc sapien rhoncus augue, vel dapibus lectus pede non ipsum. Sed at lacus in felis fringilla malesuada. Donec semper nisl nec eros. Quisque sit amet metus id wisi ultrices congue. Fusce justo enim, suscipit nec, varius a, porta non, tellus. Suspendisse potenti. Nulla vel nibh dapibus neque faucibus semper. Aliquam vehicula metus at arcu. Maecenas faucibus. Mauris nunc. Vivamus mattis.