Absolute positioning and height: 100% in IE6
Anders K.
example below (also available at <http://24.93.81.4/test.html> ). Mozilla
1.0 renders it fine, but IE6 seems to ignore the height for the inner box,
making the box only as tall as its contents. Actually, it works if I
explicitly specify a height for the outer box (say 300px), but this is
useless if I don't know how tall the box is going to be.
Another oddity is that in IE, the inner box overlaps the border of the outer
one, which I think according to the CSS spec shouldn't be the case (and it's
not in Mozilla). For some reason, this is also fixed if I specifiy a height
for the outer box.
Also, when resizing the window in IE, the inner box only moves by two pixels
at a time, resulting in the right border "blinking". (This isn't fixed by
adding a height to the outer box, in case you were wondering. :-))
Are these known bugs, and are there any workarounds?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Test</title></head>
<body>
<h1>Test</h1>
<div style="
position: relative;
border: 2px solid;
">
<div style="
background-color: #CCCCCC;
position: absolute;
right: 0px;
width: 100px;
top: 0px;
height: 100%;
">
Testing, testing, 1, 2, 3.
</div>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</body>
</html>
--
Lucas Fletcher
"Anders K." <and...@nospam.prostar.d2g.com.nospam> wrote in message
news:RY6O8.61654$lM2.2...@twister.southeast.rr.com...
> Another oddity is that in IE, the inner box overlaps the border of the
outer
> one, which I think according to the CSS spec shouldn't be the case (and
it's
> not in Mozilla). For some reason, this is also fixed if I specifiy a
height
> for the outer box.
Don't know of a workaround for this, but I have encountered it too. It seems
like a really basic bug to the fundamental box model of IE.
> Also, when resizing the window in IE, the inner box only moves by two
pixels
> at a time, resulting in the right border "blinking". (This isn't fixed by
> adding a height to the outer box, in case you were wondering. :-))
This happens to me when I position the element with the "right" style.
> Are these known bugs, and are there any workarounds?
Who knows. I have yet to come across a bug list for IE. If you find one I'd
be curious.
Lucas Fletcher
Dealers In Notions