Forums

zemaker

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


<body>

  <!-- Menu: Start-->
  <div id="menu">
    <ul>
      <li><a href="#" class="firstActive"></a></li>
      <li><a href="#" class="main">Item1 <img src="images/menu_arrow_down.gif" /></a></li>
      <li><a href="#" class="main">Item1 <img src="images/menu_arrow_down.gif" /></a></li>
      <li><a href="#" class="main">Item1 <img src="images/menu_arrow_down.gif" /></a></li>
      <li><a href="#" class="main">Item1 <img src="images/menu_arrow_down.gif" /></a></li>
      <li><a href="#" class="main">Item1 <img src="images/menu_arrow_down.gif" /></a></li>
    </ul>
  </div>
  <!-- Menu: End--> 
</body>

attilahajzer

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

zemaker

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

Thanks.

TT_Mark

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.

zemaker

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;
}

treehouse : what would you like to learn today?

Forums

IE7 menu bug