Tutorial 24: Fixing Frames with Fixed Positioning
| ||||
| ||||
|
| ||||
The trouble with browsers
The trouble with fixed positioning until recently was that it only existed in theory in the CSS2 specification. The fixed value for the position property was ignored by all CSS-enabled browsers.
Recently, the brilliant guys over at the Mozilla project have worked fixed positioning support into Gecko, which finally allows us to play with it. What prevents us from playing it very much, however, is that Internet Explorer and Navigator 4.x will handle fixed positioning with their usual, inimitable style, doing completely unpredictable things.
Well, that's not entirely true. These things, though no less troublesome, are quite predictable. You see, in order to use fixed positioning, you need to set the position property for your positioned element to fixed, which is not so much of a problem since, as I said, these browsers ignore it. However, you also need to play around with properties such as height, width, top and left that these browsers do recognize. Unfortunately, using your values for these properties without the fixed positioning may cause various ugly effects that you would like to avoid.
To address this problem, I've come up with some simple guidelines that you can use when designing pages with fixed positioning. If you stick to these guidelines, then Gecko and any other browser that complies to the CSS2 specification will display the framed section correctly, while Navigator 4.x and Internet Explorer will stick to a regular, one-section-after-the-other layout.
Predictably, even Gecko isn't faultless; I have had to work around one little bug in Gecko in our example. Before you rush to do the same, I have submitted both bugs to Bugzilla and expect them to be fixed in a build any day now.
To view all of the examples in this tutorial, you will need a browser using a relatively recent build of Gecko. Netscape Navigator 6.0 Preview Release 2 is a good example of such a browser, but you can also use a recent nightly or milestone build of Mozilla or any of the browsers that use Gecko popping up around the place, such as the ultra-slick Galeon.
