r.a. paterson wrote:
> Below the paras and the floated DIV is a block element DIV. In FF3,
> the space between the floated DIV and the element below is the
> desired 18px (the default line height) However, in IE7, and I assume
> it would look similar in IE6, there is 36 pixels of vertical space
> rather than the desired 18px.
>
> <http://firstmetvictoria.com/wp/>
Problem not found in the "images.css" stylesheet. Instead, look near the
bottom of the "default.css".
You've encountered a rather complex whitespace/clearing bug combination
in IE. The only solution I know of is to eliminate the effect of IE's
whitespace bugs and to clear without "clear" in IE6/7.
For your case the following styles have the intended effect...
.rule {
border-bottom: 1px dotted #bbb;
margin: 0 0 17px 0;
width: 100%;
height: 0;
overflow: hidden;
}
html:lang(en-US) .rule {
clear: both;
}
...where IE6/7 simply don't see the 'clear: both' since they don't
support ':lang()'.
-----------------------
FWIW: the topmost image in a floating div shows no height in IE6 and
older. To fix, delete this IE-style...
* html .floatRight img.frame {
height: 1%;
}
...as when used on an image it makes the image 1% of its container's
height. Images don't need and should never be given 'hasLayout' triggers.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
