Grow your CSS skills. Land your dream job.

Margin Problems in IE 6/7

  • # July 28, 2011 at 10:58 am

    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

    # July 28, 2011 at 11:11 am

    I’m not sure but your sidebar is a floated element…don’t you have to set “overflow:hidden”.

    If so, you can re-jig all that margin fixes you seem to have going on.

    Then again, I’m new at this stuff myself.

    # July 28, 2011 at 1:11 pm

    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.

    # July 28, 2011 at 7:21 pm

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

    # August 3, 2011 at 9:13 am

    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!

    # August 3, 2011 at 11:22 am

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".