HTML and CSS Reference
In-Depth Information
Again, as with the doubled float-margin bug, it's not entirely known why this works, though
there is extended information available at (yet again)
www.positioniseverything.net/explorer/
threepxtest.html
.
Absolute Positioning in a Relative Container
Just in case you're growing tired of the whole “we haven't a single clue why IE is doing this” routine,
here's a bug that makes a
little
more sense, even though IE's behavior is completely incorrect.
By default, an element assigned
position:absolute
should be positioned relative to the
edges of the browser window (as long as the element doesn't have any ancestors that have
been assigned any
position
value other than
static
, which is the default). To allow more
control, an absolutely positioned element contained within a box with something other than
the default position declared should be positioned relative to that container rather than the
browser window. The usual trick employed by designers is to declare
position:relative
on
a container and then
position:absolute
on a particular element within (this technique was
made incredibly popular by Doug Bowman in his article “Making the Absolute, Relative,”
www.stopdesign.com/articles/absolute/
). This is incredibly handy when, for instance, you
need to anchor an element to the
bottom
of its containing box.
It's that particular position which causes IE 6 grief: if the containing element (
position:
relative
) does not have an assigned height, IE positions the absolute box relative to the page
borders, not the containing element as it should (Figure 14-11). This is the only reason why this
bug is somewhat understandable: at least IE is using some form of logic, however twisted and
incorrect it may be.
Figure 14-11.
On the left, IE 6 positions the absolute box at the bottom of the window; all is well
after applying the Holly hack to the container
div
(right).
