Allright,
Design change required a little tweaking to get it to this point. Now the top section is ~55px too tall. In IE6 only, of course.
I've taken all the heights, widths, and most padding and margin in an effort to isolate the problem, to no joy.
<http://mosasaur.com/clients/less>
I fear this is not the last time for your layout in IE6 ;)
you have
<div id="lessframetop"> <div>...</div> <h1>...</h1> </div>
<div id="lesscontent"> ... </div>
In IE6, you can define
div#lessframetop { ... height: 15px; ...}but IE6 will expand to fit the following <div>:
div#lessframetop div { ... height: 55px;... }similar with <h1>:
div#lessframetop h1 { ... position: relative; ... top: -60px; }
* html div#lessframetop h1 {... height: 1%; }Note the word /then/ here: "The box's position is calculated according to the normal flow ... Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset."
This makes it real hard in IE6: #lessframetop is expanded by the height of <div> and <h1>
The dilemma in your design is that you have to assign a height in #lessframetop to get a reasonable height for the bg-img. (So you'd end in the very same problem by using floats: IE6 will auto-contain these floats because of the "layout" #lessframetop.)
Sorry, before we start a. p. more and more or strike back with neg. r.p. this and that, I think you should isolate the lessframetop/lesscontent and(!) its nearest positioned ancestor for a simplified testcase that works in FF and breaks in IE without debugging stuff and perhaps less orange :)
Ingo
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
