IE7 Waterfall Sprite CSS Issue

I’ve dealt with many a IE7 issue in my day, but yet again IE7 decided to grace me with a new and interesting problem.

Basically what is happening is my CSS sprite navigation menu is being turned in to a waterfall or steps depending in IE7. I used sprites for the navigation items and everything looks great in IE8, Chrome, Firefox. This is the first time sprites have given me a problem like this.

Screenshot of the problem included below

The CSS I wrote for this menu is included below…

/* sprites
----------------------------------------------- */
#navigation{float:right; margin:54px 65px 0 0; width:660px; position:relative; z-index:10; list-style-type:none}

.about-us, .menu, .catering, .private-dining, .news, .store, .directions, #nav-spacer{ text-indent:-9999em;
	background:url('/App_Themes/Mesh/Images/navSprite.png'); float:left; height:20px; cursor:pointer; display:block;}

li a.about-us{width:70px; background-position:0 0}
li{width:45px; background-position:0 -20px}
li{width:70px; background-position:0 -40px}
li a.private-dining{width:116px; background-position:0 -60px}
li{width:117px; background-position:0 -80px}
li{width:38px; background-position:0 -100px}
li a.directions{width:79px; background-position:0 -120px}
#nav-spacer{width:5px; background-position:0 -140px; margin:0 7px; cursor:default;}

and the implementation in the HTML is included below…

	<div id="navigation" class="clearfix">
			<li><a class="about-us" href="/About/">About Mesh</a></li>
			<li id="nav-spacer"></li>
			<li><a class="menu" href="/Menu/">Mesh Menu</a></li>
			<li id="nav-spacer"></li>
			<li><a class="catering" href="" target="_blank">Catering in Indianapolis</a></li>
			<li id="nav-spacer"></li>
			<li><a class="private-dining" href="/Private-Dining/">Private Dining</a></li>
			<li id="nav-spacer"></li>
			<li><a class="news" href="/News-and-Events/">News and Events</a></li>
			<li id="nav-spacer"></li>
			<li><a class="store" href="" target="_blank">Mesh Store</a></li>
			<li id="nav-spacer"></li>
			<li><a class="directions" href="/Directions-and-Contact/">Directions to Mesh</a></li>

A temporary link to the development site is if you would like to view a live example.

I am completely dumbfounded on this issue although I am sure there is a simple explanation.

Thank you for any help or suggestions you can provide!

I’ve actually never run into this bug before. Here is what google has to say about it.

“The Staircase Bug occurs when the contents of <li> elements are floated in an attempt to create a horizontal list (often used for navigation). Each item will either appear vertically stacked, or will float in a staircase pattern.
The solution? There are two: apply the float to the <li> instead, or apply display:inline; to the <li> element.”

Thanks for the advice, I changed the ID to a class, and then tried floating to the left with no luck :-/

Hi. Try floating your li left. And you can only have one id name per page so better to change that spacer to a class

Thank you very much, yea first time I have had this issue as well. I used the second solution, display:inline being applied to the <li> element, everything appears to be fixed now.

Thanks again!