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?
@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.
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