Forum Moderators: not2easy
This only occurs with a minimum height applied to #innerbox and with another block element above the box, when the whole thing is contained inside a container set with position: absolute.
You might need this kind of setup if you have a box with rounded corners, for example, where the corners are put on the background image - this bug will destroy the box layout. So in this kind of layout it seems that IE7's new min-height capabilities are not useable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#main {
position: absolute;
top: 0; left: 0;
}
#box {
background-color: red;
margin: 0 200px;
padding: 0;
}
#innerbox {
background-color: blue;
min-height: 100px;
padding: 0; margin: 0;
}
</style>
</head>
<body>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse id tellus eu arcu fringilla dapibus. Ut eget mauris. Sed faucibus rhoncus ipsum. Mauris quis nunc quis eros elementum sagittis. In eget eros. Suspendisse tempus, quam nec tincidunt rutrum, metus ipsum convallis dui, quis bibendum augue diam eu erat. Praesent a nibh. Integer lobortis porta lorem. Vivamus congue est eu justo. Nulla lacinia viverra risus. Mauris facilisis tellus ut dui. Donec eu dolor. In hac habitasse platea dictumst. Pellentesque leo. Donec quam. Praesent nunc ante, imperdiet non, imperdiet sed, tristique ut, tellus.</p>
<div id="box">
<div id="innerbox">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse id tellus eu arcu fringilla dapibus. Ut eget mauris. Sed faucibus rhoncus ipsum. Mauris quis nunc quis eros elementum sagittis. In eget eros. Suspendisse tempus, quam nec tincidunt rutrum, metus ipsum convallis dui, quis bibendum augue diam eu erat.</p>
</div><!-- end#innerbox -->
</div><!-- end#box -->
</div><!-- end#main -->
</body>
</html>
I think min-height will throw a few surprises as it is a hasLayout triggering property, but it doesn't mean it can't be used, just that some of the usual hasLayout fixes might have to come into play
min-height is triggering hasLayout to true on #innerbox, you can actually trigger the same quirky behaviour using zoom: 1; or a width (which might be needed anyway), instead of min-height on #innerbox
IE can't count, remember that! so this is causing a hasLayout error - why?
now #innerbox has "layout" it is responsible for creating the rectangle for it's content however that means it has to do sums to calculate it's width, so it has to know the width of something in it's ancestry in order to do that but it doesn't.
there are actually three ways to fix this: and two are related to the absolutely positioned div.
1. The usual hasLayout fix, give the parent some responsibility. Trigger layout to true on #box, e.g. you could use the same min-height.
The next two are slightly different and seem to prove the "let's help IE count" theory.. the error seems to stem right back to the fact that the absolutely positioned main box doesn't know its width either so fixes 2 and 3 involve clarifying things a little for IE
2. set right: 80px;
or
3. width: 80%
on the #main div, you can adjust those values to suit whichever width you want, but either of those also seem to stabilise the situation.
basically any time IE not just 7 has to count to calculate a width - in #box it's because of the margins - and then a layouted box is involved it can throw a display wobbly!
not sure if solution 2/3 would still work if the nesting was more complex, I didn't test that
Suzy
Following your advice, I played around with a few options, and in the end the best thing seems to be to add width: 100% to #main. My layout is a lot more complex than the test page, and luckily that works fine on the real page (adding min-height to #box didn't work so well because then the whole width of #box became erratic).
It's nice when the solution is so simple and doesn't involve some annoying parsing hack or something. Thanks again.
[Edit]
Well, spoke a bit too soon. Adding width: 100% produces some odd layout behaviour in Firefox, so still don't have a perfect solution. But at least I have some things to play around with.
