Grow your CSS skills. Land your dream job.

Updated: MY CSS Navigation bar buttons disappear in IE7

  • # December 31, 2009 at 1:35 am

    UPDATING Post: Using different laptop (MacBook wi Parallels XP, IE7 + Firefox + IETester) got VERY DIFFERENT results: The Nav Bar buttons work fine in IE7, Firefox and IE7 + IE8 on IE Tester application BUT, buttons disappear in IE6. Obviously, more needed, and now I gotta figure the Hack for IE6…sigh. Help still welcomed…typewriterman724

    I think my brain has hit a wall and I need some help.

    Am working on a site for a new client and I thought I’d done a nice navigation system with rollovers and background image for the buttons, etc.

    The thing works great in Firefox on a PC and Firefox, Safari & Opera on my Mac.

    Uploaded pages to a test location, and the buttons on the horizontal nav bar disappear in IE7 on one of the XP laptops in our house (still need to test it with other IEs), and I’m not sure why. The bottom border of the Nav Bar is still there. (Note: The nav system & code are pretty similar to an exercise I came across that seems to work fine. Can’t figure out where I broke it.)

    Maybe fresh eyes and minds can help figure it out. And any help would be greatly appreciated. (I put the page through the w3c validator and got 4 errors, all in another part of the page code that’s not part of the main nav bar.)

    The site/page is at:

    http://www.mdeanhill.com/magiesplace/index.html

    I’ll put the navigation code and css code below.
    First the xhtml code from the page:

    Here’s the relevant CSS

    Code:
    #mainNav {
    position: relative;
    }
    #navBar {
    width:700px;
    margin:50px auto;
    min-height:50px;
    overflow:hidden;
    background:white;
    border-bottom:5px solid #006500;

    }
    /* and more from another part of the css document */

    #navBar ul{
    position: absolute;
    left: 290px;
    bottom: 5px;
    }

    #navBar ul {
    list-style:none;
    margin:0;
    padding:0;
    float:left; /*==contains floated list items?==*/
    }
    #navBar li {
    list-style:none;
    float: left;
    margin: 0;
    padding: 0;
    display:inline;
    }
    #navBar li a:link, #navBar a:visited {
    font-family:Times, serif;
    font-weight:bold;
    font-size:120%;
    font-style:italic;
    display: block;
    color: #006500;
    text-decoration: none;
    padding: 0 13px 0 13px;
    margin-right: 30px;
    line-height: 25px;
    background: url(../media/general/magie_plank700x25.jpg);
    border: none;
    }
    #navBar li a:hover {
    color:white;
    }
    #navBar li a.current {
    margin-top: -5px;
    height: 30px;
    background: url(../media/general/magie_plank700x35.jpg) no-repeat;
    color: #006500;
    line-height: 25px;
    }
    #navBar li a.current:hover {
    cursor: default;
    }
    #navList {
    display:inline;
    }

    Thank you again for any help. Sometimes I feel real good about my coding skills and then there are days when all that confidence melts away. :)
    typewriterman724…

    # January 20, 2010 at 7:21 pm

    I am having a very similar problem, although I don’t know which IE version I was using when my navbar didn’t work. I used javascript for the onMouseOver and onMouseOut, but the effect works find in Firefox and Safari, just not IE. Did you find anything out yet?

    # January 21, 2010 at 5:21 am

    Make the following changes

    Code:
    #navBar li {
    list-style:none;
    float: left;
    width: 100px;
    margin: 0;
    padding: 0;
    display:inline;
    }

    Floated elements must be given a width

    Code:
    #navBar {
    width:700px;
    margin:20px auto;
    height:20px;
    overflow:hidden;
    background:white;
    border-bottom:5px solid #006500;
    }

    You don’t need min-height on this and I reduced the margins as there was too much whitespace.

    Remove everything from #navBar ul – it does not require absolute positioning

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

You must be logged in to reply to this topic.

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