Grow your CSS skills. Land your dream job.

IE7 menu bug

  • # May 13, 2011 at 4:29 pm

    This is driving me nuts, and I am at a loss. The menu items are listed horizontally, however in IE7 there seems to be extra padding/margin on each additional element…any ideas? See code below:

    CSS


    @charset "utf-8";
    /* CSS Document */
    body {
    padding: 0;
    margin: 0;
    color: #000;
    background-color: #B8D9F5;
    }
    img {
    border: none;
    }
    /*Menu*/
    div#menu {
    clear: both;
    width: 978px;
    height: 50px;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: #0059A2;
    }
    div#menu ul {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
    }
    div#menu ul li a {
    text-decoration: none;
    color: #FFF;
    display: block;
    height: 50px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    }
    div#menu ul li a.first {
    float: left;
    background-image: url(../images/menu_home.gif);
    background-repeat: no-repeat;
    height: 50px;
    width: 49px;
    padding: 0;
    }
    div#menu ul li a.firstActive {
    float: left;
    background-image: url(../images/menu_home_selected.gif);
    background-repeat: no-repeat;
    height: 50px;
    width: 49px;
    padding: 0;
    }
    div#menu ul li a.first:hover {
    background-color: #005196;
    background-image: url(../images/menu_home_hover.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    }
    div#menu ul li a.main {
    margin: 0;
    padding: 8px 10px 0 20px;
    display: inline;
    height: 42px;
    width: 140px;
    position: relative;
    float: left;
    }
    div#menu ul li a.mainActive {
    margin: 0;
    padding: 8px 11px 0 19px;
    display: inline;
    height: 42px;
    width: 138px;
    position: relative;
    float: left;
    background-color: #004580;
    background-image: url(../images/menuHoverArrow.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    border-left: 1px solid #053D60;
    border-right: 1px solid #053D60;
    }

    div#menu ul li a.main:hover {
    background-color: #005196;
    background-image: url(../images/menuHoverArrow.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    }

    HTML







    # May 13, 2011 at 5:48 pm

    could it maybe be that your not styling the actual li element? just a thought.

    # May 13, 2011 at 5:51 pm

    Indeed that was the problem…always the most obvious thing.

    Thanks.

    # May 13, 2011 at 6:54 pm

    Your CSS needs a lot of improvements to it. You’re redefining styles that don’t need to be redefined as they are inherited, you’re settings properties in multiple locations where they could be set in one and inherited and your setting background properties the lengthy way.

    # May 16, 2011 at 10:08 am

    Went back through and cleaned it up…I prefer the background properties the lengthy way for catching errors. Any other recommendations?


    /* CSS Document */
    /*Menu*/
    div#menu {
    clear: both;
    width: 978px;
    height: 50px;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: #0059A2;
    }
    div#menu ul {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
    }
    div#menu ul li {
    display: inline;
    }
    div#menu ul li a {
    text-decoration: none;
    color: #FFF;
    height: 50px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    }
    div#menu ul li a.first {
    float: left;
    background: url(../images/menu_home.gif);
    height: 50px;
    width: 49px;
    padding: 0;
    }
    div#menu ul li a.firstActive {
    float: left;
    background: url(../images/menu_home_selected.gif) no-repeat;
    height: 50px;
    width: 49px;
    padding: 0;
    }
    div#menu ul li a.first:hover {
    background: #005196 url(../images/menu_home_hover.gif) no-repeat bottom;
    }
    div#menu ul li a.main {
    float: left;
    margin: 0;
    padding: 8px 10px 0 20px;
    height: 42px;
    width: 140px;
    position: relative;
    }
    div#menu ul li a.mainActive {
    margin: 0;
    padding: 8px 11px 0 19px;
    height: 42px;
    width: 138px;
    float: left;
    background: #004580 url(../images/menuHoverArrow.gif) no-repeat bottom;
    border-left: 1px solid #053D60;
    border-right: 1px solid #053D60;
    }

    div#menu ul li a.main:hover {
    background: #005196 url(../images/menuHoverArrow.gif) no-repeat bottom;
    }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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