# Navigation disappears on IE7...



## TheTrueMaverick (Aug 1, 2006)

Greetings,

I am currently working on a website, and using a image roll-over in CSS, and the navigation itself is displayed inline.

It works perfectly on browsers as Firefox, Opera, Chrome and IE 8; but NOT on IE7 or earlier.

I clearly have no idea what the problem is now,,, ran out of ideas. But I have narrowed down where the problem may be, and it seems to be within the roll-over settings... Or display even.

Basically, the same code for each navigation image... But the navigation shows 100% if I exclude the image swapping.

If any of you could help with a clear step-by-step; would hugely appreciate it; Thanks in advance

S

*HTML:*

```
<ul id='navi'>
   <li id='navinewsvisited'><span>News</span></li>
   <li id='naviabout'><a href='?page=about'>About</a></li>
   <li id='navidisco'><a href='?page=disco'>Disco</a></li>
   <li id='navigigs'><a href='?page=gigs'>Gigs</a></li>
   <li id='navimedia'><a href='?page=media'>Media</a></li>
   <li id='navimerch'><a href='?page=merch'>Merch</a></li>
   <li id='navilinks'><a href='?page=links'>Links</a></li>
</ul>
```
*CSS:*

```
/* navi */
#navi{
	color:#900;
	margin-top:93px;
	list-style-type:none;
	text-align:center;
}
#navi li{
	margin-left:8px;
	margin-right:8px;
	display:inline;
}
/*news*/
#navinews a{
	background-image:url(images/navi/news1-2.png);
	background-position:0 0;
	background-repeat:no-repeat;
	height:13px;
	width:40px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#FFF;
}
#navinews a:hover{
	background-image:url(images/navi/news1-2.png);
	background-position:0 -13px;
	color: #CCC;
}
#navinewsvisited span{
	background-image:url(images/navi/news3.png);
	background-repeat:no-repeat;
	height:13px;
	width:40px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#666;
}
/*about*/
#naviabout a{
	background-image:url(images/navi/about1-2.png);
	background-position:0 0;
	background-repeat:no-repeat;
	height:13px;
	width:52px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#FFF;
}
#naviabout a:hover{
	background-image:url(images/navi/about1-2.png);
	background-position:0 -13px;
	color: #CCC;
}
#naviaboutvisited span{
	background-image:url(images/navi/about3.png);
	background-repeat:no-repeat;
	height:13px;
	width:52px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#666;
}
/*disco*/
#navidisco a{
	background-image:url(images/navi/disco1-2.png);
	background-position:0 0;
	background-repeat:no-repeat;
	height:13px;
	width:49px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#FFF;
}
#navidisco a:hover{
	background-image:url(images/navi/disco1-2.png);
	background-position:0 -13px;
	color: #CCC;
}
#navidiscovisited span{
	background-image:url(images/navi/disco3.png);
	background-repeat:no-repeat;
	height:13px;
	width:49px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#666;
}
/*gigs*/
#navigigs a{
	background-image:url(images/navi/gigs1-2.png);
	background-position:0 0;
	background-repeat:no-repeat;
	height:12px;
	width:36px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#FFF;
}
#navigigs a:hover{
	background-image:url(images/navi/gigs1-2.png);
	background-position:0 -12px;
	color: #CCC;
}
#navigigsvisited span{
	background-image:url(images/navi/gigs3.png);
	background-repeat:no-repeat;
	height:12px;
	width:36px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#666;
}
/*media*/
#navimedia a{
	background-image:url(images/navi/media1-2.png);
	background-position:0 0;
	background-repeat:no-repeat;
	height:13px;
	width:48px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#FFF;
}
#navimedia a:hover{
	background-image:url(images/navi/media1-2.png);
	background-position:0 -12px;
	color: #CCC;
}
#navimediavisited span{
	background-image:url(images/navi/media3.png);
	background-repeat:no-repeat;
	height:13px;
	width:48px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#666;
}
/*merch*/
#navimerch a{
	background-image:url(images/navi/merch1-2.png);
	background-position:0 0;
	background-repeat:no-repeat;
	height:12px;
	width:52px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#FFF;
}
#navimerch a:hover{
	background-image:url(images/navi/merch1-2.png);
	background-position:0 -12px;
	color: #CCC;
}
#navimerchvisited span{
	background-image:url(images/navi/merch3.png);
	background-repeat:no-repeat;
	height:12px;
	width:52px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#666;
}
/*links*/
#navilinks a{
	background-image:url(images/navi/links1-2.png);
	background-position:0 0;
	background-repeat:no-repeat;
	height:13px;
	width:40px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#FFF;
}
#navilinks a:hover{
	background-image:url(images/navi/links1-2.png);
	background-position:0 -13px;
	color: #CCC;
}
#navilinksvisited span{
	background-image:url(images/navi/links3.png);
	background-repeat:no-repeat;
	height:13px;
	width:40px;
	margin:0 auto;
	display:inline-block;
	text-indent:-999999px;
	color:#666;
}
```


----------

