Previous Message
Next Message

Re: [css-d] IE6 and overflow

Sent by Andrew Clover on 26 January 2002 21:09

Aliotsy Andrianarivo [EMAIL-REMOVED]> wrote:


> Does anyone know what is going on? The page looks fine in IE5.5 and NN6.2.

Good catch. This is a situation where CSS's behaviour is confusing and not
what people expect, coupled with a bug in IE.

The reason is that your 'overflow'ing divs are positioned blocks with heights
set in percentages. CSS2 says that these percentages are relative to the
height of the Containing Block. (For an absolute-positioned block, the CB
is the nearest non-statically-positioned ancestor element, or the initial
containing block of your browser window, represented by the <html> element).

If the Containing Block has not had its height set, its height is just big
enough to contain everything inside it. In this case you cannot set a
child's height in percentages, because the height it would be a percentage
of would have to be calculated from its own height - a paradox. IE5 and
IE6-Quirks-Mode ignore this and let you use percentages anyway and it
sort-of works, most of the time. IE6-Standards and Mozilla do not, and
ignore the height specification. (Causing your divs to be larger than you

Now you could interpret IE6's layout of your page as being valid
according to the letter of the spec. The initial CB, <html>, does not
(normally) have its height set explicitly. Its width and height are both
'auto' by default. However because this element represents the window you
are viewing the document in, the web browser *implicitly* sets the width
and height to match the size of the window. Is IE saying that this doesn't
count as an explicit height, and hence ignoring all percentage-heights of
positioned elements?

Well, actually no it isn't. It's a bug. IE only looks up the ancestors as
far as <body> instead of going all the way to <html>, presumably because
in Quirks Mode and older IEs, <body> was - erroneously - the element
representing the browser window. So the quick workaround for IE6 is to
set a height on body:

  body { height: 100%; }

I haven't tested to see if this confuses any other browsers though. If it
does it may have to be overridden on non-IE browsers by following it with:

  html>body { height: auto; }

Right, now how's about moving those 'align' attributes into CSS, and
replacing the status-bar-changing mouseover hacks into nice proper
<a title="..."> attributes?

Andrew Clover
Previous Message
Next Message

Message thread:

Possibly related: