height of an element and explorer

Hello, all,

First time I post, so I beg for everyone's patience.

I am writing because I have the following doubt. in the page
http://atuin.no-ip.org, you can see a blue-grey bar stretching down the
length of the right side of the website. In order to achieve the effect
in IE, I had to add height: 700px (or another outrageously long
number), or else the coloring of the sidebar would stop when the last
item within the sidebar finished (ie: the menu). However, no tweaking
was required with opera and firefox; the bar was painted down the
length of the website.

I would like to know which is the correct behavior, and, if IE is
misbehaving, if there's a better way to produce said effect.

Thank you for your time,

Eduardo Alvarez

On 2006-12-24, astrochelonian (AT) gmail (DOT) com <astrochelonian (AT) gmail (DOT) com> wrote:

Hello, all,

First time I post, so I beg for everyone's patience.

I am writing because I have the following doubt. in the page
http://atuin.no-ip.org, you can see a blue-grey bar stretching down the
length of the right side of the website. In order to achieve the effect
in IE, I had to add height: 700px (or another outrageously long
number), or else the coloring of the sidebar would stop when the last
item within the sidebar finished (ie: the menu). However, no tweaking
was required with opera and firefox; the bar was painted down the
length of the website.

I would like to know which is the correct behavior, and, if IE is
misbehaving, if there's a better way to produce said effect.

The rule is that top + height + bottom + total vertical margins, borders
and padding must equal the containing height.

If you set values for most of those properties, the browser fills in the
rest to make them all add up to the containing height (according to
precise rules all in the CSS 2.1 spec).

If you set values for them _all_, though, then the values are
"overconstrained" and the browser has to ignore at least one of the
values you set. In this case that would be the value for bottom.

If you set height to 10px in your example and leave everything else as
it is, you will see that in Firefox you get a height of 10px-- the value
for bottom got discarded.

If IE is doing that part of the spec about right (which we don't know),
the most likely explanation is that IE is mistaken about the containing
height. If you set "bottom: 0", the bottom edge should be at the bottom
edge of the container, which should be the bottom edge of the viewport
in this case, but this relies on the browser getting the containing
height right. If you set "height: 700px" on the other hand, the browser
will give you a height of 700px even if it thinks it's overflowing its
container.

Firefox is showing correct behaviour because the containing block of an
absolutely positioned box is its nearest positioned ancestor or the
viewport if it has no positioned ancestors (which in your case it
doesn't).

So it looks like IE is misbehaving. Your method of producing the effect
is a good one, I don't know the IE workaround.