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 a.menu{width:45px; background-position:0 -20px}
li a.catering{width:70px; background-position:0 -40px}
li a.private-dining{width:116px; background-position:0 -60px}
li a.news{width:117px; background-position:0 -80px}
li a.store{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">
		<ul>
			<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="http://www.stonecreek-catering.com/Content/About-Us.aspx" 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="https://netmasons.formbin.com/forms/crg_dining_gift_card_purchase" target="_blank">Mesh Store</a></li>
			<li id="nav-spacer"></li>
			<li><a class="directions" href="/Directions-and-Contact/">Directions to Mesh</a></li>
		</ul>
	</div>

A temporary link to the development site is http://mesh.securetree.com 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. http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs#staircase-bug

“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!