On May 13, 2005, at 2:59 AM, Ingo Chao wrote:
Lorin Rivers schrieb:
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
Ingo, you are the BEST.
OK, well I took out all the debugging borders out, as well as the position info for h1. The question I should be asking I guess is how do I get the h1 to be centered vertically in #frametop and more-or- less aligned right?
In FF now, the h1 is left-aligned and below the div and in IE it's in the same position, but also makes the containing div that much taller.
-- Lorin Rivers Mosasaur: Killer Technical Marketing <http://www.mosasaur.com> <mailto:[EMAIL PROTECTED]> 512/203.3198 (m)
______________________________________________________________________ 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/
