Grow your CSS skills. Land your dream job.

Horizontal Menu Layout Problem in IE

  • # February 28, 2011 at 2:54 pm

    I’m trying to build a horizontal menu and when I view it in IE6 and IE7 (I haven’t checked IE8 or 9), the last item in the list is offset vertically by about 3-5 pixels. I first assumed that it was the element that was wrong, but I’m willing to believe that it’s the rest of the list that is displaying incorrectly by not taking the padding on the element. Either way, I’ve tried everything I can think of, to no avail. I’m sure it’s something easy I’m overlooking, but I could use some help/advice on this. Thanks!!

    Here’s the (dev) site: convocation.weebly.com

    And here’s the css:

    #navigation {
    width: 500px;
    margin: 0em auto 3em;
    overflow: hidden;
    }

    #navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #navigation li {
    float: left;
    margin: 0;
    padding: 0px 5px;
    }

    #navigation a {
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: 12px;
    color: #4F6FCA;
    font-variant: small-caps;
    text-decoration: none;
    font-weight: bold;
    }

    There’s also a reset at the top of the css:

    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
    margin:0;
    padding:0;
    }

    And the html (all id’s except for “navigation”, and inline styles generated by the system):

    # February 28, 2011 at 7:41 pm

    In IE8 it looks OK.

    # February 28, 2011 at 8:17 pm

    Try to validate through w3c first. http://validator.w3.org/check?uri=http%3A%2F%2Fconvocation.weebly.com%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0
    If it still doesn’t work, try this, and add to the head section of the page.

    < ![if ! lte IE 7]>

    < ![endif]>

    # March 1, 2011 at 12:37 pm

    Thanks, supperman!

    I ran it through validation, and all the errors I got were from the generated code, nothing I could change/fix.

    I applied the conditional style and it worked. That made me realize that I just needed to add the style:

    #navigation a {float: left;}

    to the main stylesheet and it took care of it all!

    (Still don’t know why it worked, but it did!)

    Appreciate the set of fresh eyes!!

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

You must be logged in to reply to this topic.

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