Grow your CSS skills. Land your dream job.

Nav Menu craps the bed in I.E.

  • # June 11, 2009 at 10:35 am

    Hello, I’m pretty new to this stuff, so any help at all is MUCH appreciated.

    Well, the title kinda says it all. In FF, the menu works fine. In I.E. however (I’ve only tested in I.E. 7), The menu appears staggered, almost like stairs. Unfortunately, the "stairs" end up going down and "underneath" the main content area of the page, rendering them inaccessible, not to mention ugly as sin.

    Both the CSS and HTML validated transitional, and they both passed the "browser compatibility" test in Dreamweaver.

    Any ideas?

    Here’s the CSS of the Nav Menu:

    Code:
    div#header ul#header_nav {
    width: 720px;
    margin: 0px 20px 0px 0px;
    list-style: none;
    }
    ul#header_nav li a {
    display: block;
    width: 180px;
    margin-top: 120px;
    text-align: center;
    color: #FFF;
    font-size: 12pt;
    text-decoration: none;
    letter-spacing: 0.3em;
    float: left;
    font-weight: bold;
    }
    ul#header_nav li a:hover {
    color: #9EC1E1;
    }
    ul#header_nav li#current a {
    color: #9EC1E1;
    }

    Here’s the site: http://www.hebtech.com

    Here’s the complete CSS: http://hebtech.com/index_styles.css

    Rob
    # June 11, 2009 at 10:45 am

    try adding:

    Code:
    #header_nav li {
    display:block;
    float:left;
    }

    and see what happens… :D

    # June 11, 2009 at 10:51 am

    You sir, truly are a warrior.

    Thanks a million!

    Rob
    # June 11, 2009 at 2:02 pm
    "takeiteasy04" wrote:
    You sir, truly are a warrior.

    Thanks a million!

    no probs sir :) <bow />

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