Two Win IE6 spacing issues

[jonzal]

Page in question is here: http://www.northshoredesign.com/smartleaf

Two things:

1.) The green bar within which the words "News & Events" appear is a 214px-wide GIF. The white box within which all of the page content lives has a 40px padding set on the left and right sides. The right edge of the green "News & Events" bar is supposed to be flush against the right edge of the white box. Thus, in the CSS, I have set the margin for the "News & Events" div to margin: 0 -40px 0 0;
In my Mac browsers, this works perfectly. In Win IE6, however, the right 40 pixels-worth of the green "N&E" bar are cut off; only the first 174px of the bar are shown, with the right edge of the bar flush against the right side of the white box.
Paradoxically, if I change that div to margin: 0; the green "N&E" bar respects the padding on the white box in Win IE6, and thus is 40px away from the right edge of the box. No clue why this is happening.

2.) In Win IE6, there are, between the bottom edge of the white box and the top of the "copyright" text at the bottom of the page, about 20px of extra space that I can't account for; the copyright butts right up to the bottom edge in my Mac browsers. Where's the extra space coming from in Win IE6?

Any help with both/either of these issues would be greatly appreciated.

[Paul O'B]

HI,

1 is the double margin bug on the side of a float nearest the containers edge (see faq on floats). In your case the negative margin is doubled taking it further off-screen.

Here is the fix:

#home div#home_newsevents {
    width: 214px;
    float: right;
    padding: 32px 0 0 0;
    margin: 0 -40px 0 0;
display:inline;
}

See the faq on floats for the explanation

[Paul O'B]

For No. 2 add this as your float hasn't been cleared.

div.homefooter {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #666;
    margin: 0;
    padding: 0;
    height: 9px;
clear:both
}

[jonzal]

Wow. Thanks yet again, Paul. I really appreciate the help.