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.