Margin Problems in IE 6/7

[svoltmer]

I am trying to position my navigation to butt up against the side of a div with the main content. I have to use negative margin to get it to display correctly, but in IE 6/7 it is much further to the left then it should be. What should I change to make it compatible with IE?

http://www.crosst.org/unashamed

[Historical Forums User]

I’m not quite sure if I’m right but I see that at the beginning of your stylesheet you have

* html #main-nav { margin:50px 0px 0px 20px;}

then further down you have :

#main-nav { margin:20px 0px 0px -70px;}

I’m guessing that IE doesn’t ignore this . Also try doing a basic reset of your margin and padding at the top of the stylesheet.

Hope this helps, cheers!

Instead of applying

 { margin: 0; padding: 0; }

to the body element try aplying this to all elements on the page.

[wolfcry911]

@Paulie_D, overflow: hidden is but one way for a parent to contain floating children – it has no purpose here.

@adrianoprea, IE6 will read honor the star html hack, IE7 will ignore it. And while a reset would clear things, I don’t agree with its use on every element (I’m in the minority).

@svoltmer, here’s the reason and the corrections. Most every browser will indent a list by default. Some use padding (gecko, webkit) and some use margin (IE). So to start, I’d set the left margin and padding to zero. You’ve already set the ul left margin to zero but not the padding, so the IE7 shows too far to the left. Zero the padding and FF, Safari will also be too far to the left, but that can be corrected by lessening the negative left margin. So that sets all browsers to same except IE6, which is reading your star html hack. IE6 has a double margin on floats bug which can be corrected by adding display: inline to the ul (#main-nav). This rule is overridden by the float, but for some odd reason fixes the bug. So there should be no need to even use the star-html hack at all.

[svoltmer]

Thanks for all the suggestions! Adding zero padding to the the class #main-nav and removing the negative margin from the ul did the trick. I really appreciate the help!

[svoltmer]

One other question, since you have seen the site. The sidebar contains the div “#social” (rounded corner on the bottom right). Is there a way to make this div always be at the bottom of the maximum height of the div “#main-content”. As more content is added to the div #main-content it grows taller and the div “#social” would stay down at the bottom of it. Tks

[Author]

Posts