CSS floating fungerer ikke riktig i IE

[lassejl]

Heisann, har et lite problem her som jeg ikke ser ut til å finne ut av selv.

 

Har en meny som består av li elementer som skal plasseres inline ved hjelp av floating.

Dette fungerer fint i firefox, men i IE ser de ut som en trapp.

 

Problemet vist her:

 

IE:

 

Slik skal det være:

 

FF:

 

CSSen ser slik ut:

 

#nav {
color:white;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
float:left;
width:360px;
}
#nav ul {
	list-style:none inside;
}

#nav li {
	color:white;
	font-size:0.9em;
}

#nav li a {
	width:103px;
	height:33px;
	background:url(gfx/button-bg.png) no-repeat;
	display:block;
	float:left;
	color:white;
	text-decoration:none;	
	padding-top:8px;
	margin-left:15px;
}

	#nav li a:hover {
		background:url(gfx/button-hover.png) no-repeat;
	}

 

HTML (basic men still...):

<div id="nav">
<ul>
	 <li><a href="">Hjem</a></li>
	 <li><a href="">Produkter</a></li>
	 <li><a href="">Kontakt</a></li>
 </ul>
</div><!-- end nav -->

 

Håper noen har en lett løsning som jeg har oversett.

 

Setter pris på alle svar.

Endret 27. juni 2008 av lassejl

[Stian89]

Hva skjer hvis du faktisk bruker display: inline; da?

[lassejl]

Da blir jo ikke elementene block og bakgrunnen vil jo bare vises der det er text og ikke vre klikkbare over hele...

[datech]

Du kan jo prøve å sette float: left på #nav li

[lassejl]

Selvfølgelig takker