Alan Chandler wrote: > OK - I managed to almost fix up the page so the validator works, mainly by > defining the DOCTYPE an xhtml. There is one warning which will take some > more work, but is not related to this. > > Now, I'll ask the question again .
Thanks for validating; it makes debugging easier, and it's not an end in itself. My web page, at the url below will not > display properly in IE. The div with id="header" is being expanded > vertically to match the height of the floated image, whereas I want to to > stay at the height of the text plus padding, as it does in Firefox. > > I have been unable to find what quirk it is that causes this, and therefore > not find a way around it. > http://www.chandlerfamily.org.uk You are throwing comments in before the doctype; therefore, IE7b2 and IE6 are rendering the page in quirks mode. I mention this because the fix below will /not/ work in quirks mode. Your CSS #header { ... width: 800px; } gives 'layout' to the header [1]. Having layout, the header will expand to contain the floating img. #header img { ... float: left; } In standards mode, IE7 would respect a given height - let's say, 50px - #header { ... width: 800px; height: 50px; } Without this explicit height, even in 'more standards' mode, IE7 unfortunately still expands the header to contain the float because of the mentioned 'layout' issue. That's it for IE7b2. IE6 needs a restriction to prevent the expanding: #header { ... width: 800px; height: 50px; overflow:hidden;} Now the height is respected, but the image is cut. So #header img { .. float: left; position:relative;} is needed to let the float stick out of the header. This does not work in quirks mode, and this does not work in IE5.5 or below. Other browsers shouldn't see this quirky stuff, so the head section needs a conditional comment 'less than or equal to' IE7 <!--[if lte IE7]> <link rel="stylesheet" href="iefix.css" type="text/css" /> <![endif]--> and iefix.css says #header { height: 50px; } #header { _overfl\ow: hidden;} /* only IE6, because the underscore excludes IE7 and the escape excludes IE5.5 */ #header img { _position:relative;} /* lte IE6 */ But I see, this path full of hacks. An alternative path would be to change the condition that IE tries to contain the float at all. Back to the first step: #header { ... width: 800px; } Can't your design do without this width? Ingo [1] http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.satzansatz.de/css.html ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
