IE 6 and 7 menu issue

HTML & CSS
1

I have a menu that works fine in most browsers. It does some funny stuff in IE6 and IE7. I’ve tried some things with the CSS in firebug but i’m just not seeing the issue. Could someone help me figure out why it seems to step down as the menu goes right in these 2 IE versions?

menu page here

CSS

html, body {
    padding: 0px;
    margin: 0px;
	background-image: url(images/entire_background.jpg);
	background-repeat: repeat-x;
	background-color: #536a3a;
	font-family: Veranda, Helvetica, sans-serif;
	font-size: 12px;
	color: #c8c8c8;
}

div#container {
    width: 960px;
    margin: 0 auto;
}

div#headerTitle {
    height: 198px;
	width: 598px;
	margin: 0px 0px 0px 0px;
	background-image: url(images/RLW_.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
}

div#header {
    height: 198px;
	background-image: url(images/header_background.jpg);
    background-repeat: repeat-x;
    background-position: 0 0;
}


#navigation ul {
  width: 697px;
  height: 90px;
  margin-top: 2px;
  margin-left: 288px;
  list-style-type: none;
}

.nav-links li a {
  float: left;
  width: 76px;
  height: 62px;
  margin: 0px 10px 0px 10px;
}
.nav-links li a:hover {
  background-repeat: no-repeat;
  background-position: center bottom;
}



/*********************BEGINNING OF BUTTONS********************/
.GroupHome {
	height: 60px;
	width: 76px;
	background-image: url(images/home_button.jpg);
	background-repeat: no-repeat;
}
.GroupAbout {
	height: 60px;
	width: 76px;
	background-image: url(images/about_button.jpg);
	background-repeat: no-repeat;
}
.GroupServices {
	height: 60px;
	width: 78px;
	margin-left: 12px;
	background-image: url(images/service_button2.jpg);
	background-repeat: no-repeat;
}

.GroupPortfolio {
	height: 60px;
	width: 76px;
	margin-left: 10px;
	background-image: url(images/portfolio_button2.jpg);
	background-repeat: no-repeat;
}

.GroupContact {
	height: 60px;
	width: 76px;
	margin-left: 9px;
	background-image: url(images/contact_button2.jpg);
	background-repeat: no-repeat;
}

.GroupBlog {
	height: 60px;
	width: 76px;
	background-image: url(images/blog_button2.jpg);
	background-repeat: no-repeat;
}

.GroupLinks {
	height: 60px;
	width: 76px;
	background-image: url(images/links_button2.jpg);
	background-repeat: no-repeat;
}
/************************end of regular buttons**********************/

/*************************************** BUTTONS ***********************************/

.GroupHome:hover {  /*color change for a hover over anything with a group class*/
	height: 60px;
	width: 76px;
	background-image: url(images/home_button_hover.jpg);
}

.GroupAbout:hover {  /*color change for a hover over anything with a group class*/
	height: 60px;
	width: 76px;
	background-image: url(images/about_button_hover.jpg);
}

.GroupServices:hover {  /*color change for a hover over anything with a group class*/
	height: 60px;
	width: 76px;
	margin-left: 10px;
	background-image: url(images/service_button_hover2.jpg);
}
.GroupPortfolio:hover {  /*color change for a hover over anything with a group class*/
	height: 60px;
	width: 76px;
	margin-left: 10px;
	background-image: url(images/portfolio_button_hover2.png);
}
.GroupContact:hover {  /*color change for a hover over anything with a group class*/
	height: 60px;
	width: 76px;
	margin-left: 10px;
	background-image: url(images/contact_button_hover2.jpg);
}
.GroupBlog:hover {  /*color change for a hover over anything with a group class*/
	height: 60px;
	width: 76px;
	background-image: url(images/blog_button_hover2.jpg);
}

.GroupLinks:hover {  /*color change for a hover over anything with a group class*/
	height: 60px;
	width: 76px;
	background-image: url(images/links_button_hover2.jpg);
}
/**********************************End of Regualer Buttons*******************************/

HTML

<body>


<div id="container">

<div id="header">
    	<div id="headerTitle">
        </div>
        
        <!--NAVIGATION STARTS-->
    	<div id="navigation">
            <ul class="nav-links">
              <li><a href="index.html" title="home" class="GroupHome"></a></li>
              <li><a href="about.html" title="about" class="GroupAbout"></a></li>
              <li><a href="services.html" title="services" class="GroupServices"></a></li>
              <li><a href="portfolio.html" title="portfolio" class="GroupPortfolio"></a></li>
              <li><a href="contact.html" title="contact" class="GroupContact"></a></li>
              <li><a href="blog.html" title="blog" class="GroupBlog"></a></li>
              <li><a href="links.html" title="links" class="GroupLinks"></a></li>
              <!--<li class="borderx2"><a href="#" title="contact">contact</a></li>-->
            </ul>
  		</div>
    <!--NAVIGATION ENDS-->
    
    </div>
    
</div>


</body>
2

Hi, this is called the staircase bug. Yoiu float hte anchor, however, IE7 and down need the <li> either display:inline or floated.
Floating the <li> should work nicely :slight_smile:

3

Ryan Thanks For the Quick Reply!! That was it.

For others that may run into this issue I used this link after Ryan replying.

4

Glad it worked :).