Forums

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

Home › Forums › CSS › IE7 menu bug

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 13, 2011 at 4:29 pm #32729
    zemaker
    Participant

    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:51 pm #76256
    zemaker
    Participant

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

    Thanks.

    May 13, 2011 at 6:54 pm #76263
    TT_Mark
    Member

    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 #75992
    zemaker
    Participant

    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;
    
}
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.