Blake wrote:
> Hi List,
>
> I have a strange but in IE6 and IE7 where I have an LI and inside that
> there is a DIV. The LI has no padding and the DIV has no margin. The
> DIV has a background image which is set to display at the bottom, and
> because there is no margin and padding it should be sitting at the
> bottom of the LI. But for some reason the LI extends about 20px
> further down the page than it should so the background image doesn't
> line up properly.
>
> I don't understand where the extra height is coming from. The code is
> below. If you want to see the site please send me a message off-list.
>
> Any ideas?
> Thanks guys!
Hi Blake, this seem related to the IE/Win margin transference bug [1] but
different due to no clearing element. The gap is caused by the margin-bottom of
the h2 heading, and I think since the the container <li> element has hasLayout
[2], the margin-bottom is transfered and appears under the outer floated div.
This is the current CSS involved.
li { background: width: 300px; /* hasLayout trigger */ }
li h2 { margin-bottom: 15px; }
change the h2 to
li h2 { margin-bottom: 0; }
and add
li h2 { margin-top: 20px; }
li>div { margin-top:15px; }
The margin-top has been added since the default top margin of the h2 heading
has disappeared because it's container has hasLayout [2].
Isn't IE magic :-)
1. http://css-class.com/test/bugs/ie/margintransferencebug.htm
2. http://www.satzansatz.de/cssd/onhavinglayout.html
Alan
http://css-class.com/
______________________________________________________________________
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/
