Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Horizontal Menu Layout Problem in IE

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #31819
    baldguy
    Participant

    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):

    #57778
    supperman
    Participant

    In IE8 it looks OK.

    #57781
    supperman
    Participant

    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.

    #57463
    baldguy
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.