All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

IE pushes the menu bar down the page a bit.

  • # April 9, 2009 at 10:23 pm

    Hi. New guy, here.

    I created a site based on tutorials #25-27. It looks good, but when you view it in IE, the horizontal navigation bar gets pushed down below my nav bar background graphic. Since the text is white, you can now only see the menu by hovering over it.

    I’m thinking this has to do with some IE conditional coding I need to include, but I don’t know where to begin.

    Any help would be appreciated. Thank you.

    Here is the .css style for my the menu bar:

    #menu-bar { padding-top: 0px; margin-bottom: 10px; }
    ul#main-nav { width: 600px; float: left; margin: 1px 0 0 10px; }
    ul#main-nav li { display: inline; }
    ul#main-nav li a { text-transform: uppercase; color: white; font-size:
    1.4em; font-weight: bold; padding: 8px 15px;
    -moz-border-radius: 5px; -webkit-border-radius:
    ul#main-nav li a:hover { background: black; color: #FFFFFF; }
    form#searchform { margin: 0px 10px 20px 60px; display: inline; }

    # April 9, 2009 at 10:45 pm

    Add this to your CSS

    ul#main-nav li {

    and move your <div class="clear" /> after the menu bar div.

    # April 12, 2009 at 11:19 pm

    Thanks for the help, apostrophe! I appreciate it.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed