Navigation - Problem

[kevkev]

Hallo,

Ich habe mir eine einfache Navigation in css geschrieben, teils kopiert, die im FF natürlich wunderbar funktioniert, aber eben im IE nicht, wie so oft.

#navlist {
float:left;
width: 150px;
font-weight: bold;
}

#navlist ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
font-size: .9em;
}

#navlist li {
margin: 0;
}

#navlist a {
border-top:1px solid #C1C1C1; 
display: block;
background-color: #A6A6A6;
padding-left:10px; 
padding-right:2px; 
padding-top:2px; 
padding-bottom:2px
}

.top {
background-color:#FF7A1A;
border-bottom:2px solid #777777;
display: block;
padding-left:5px; 
padding-right:2px; 
padding-top:5px; 
padding-bottom:5px;
color:white;
}

<div id="navlist">
	<br>
		<span class="top">Home</span>
		<ul>
			<li><a href="#">Music</a></li>
			<li><a href="#">Dvd</a></li>
			<li><a href="#">Reisen</a></li>
			<li><a href="#">Page Four</a></li>
			<li><a href="#">Page Five</a></li>
		</ul>
</div>

Soo, im IE ist der zwischenraum zwischen den einzelnen <li>´s total groß.
Die einzelne Box wird auch nur mit einer andere hintergrundfarbe gefüllt, wenn ich auf den text-link gehe. wenn ich aber über die Box gehe, passiert nichts.

Ich hoffe Ihr könnt mir helfen !

gruß kevin

 

[Quaese]

Hi,

für den IE musst du explizit angeben, dass die LI-Tags als inline-Elemente angezeigt werden sollen.
Das Einfärben des Hintergrunds sollte über die Pseudoeigenschaft hover realisiert werden.
Hier ist für den IE wiederum zu beachten, dass die Breite des Links mit 100% angegeben wird.

Der geänderte entsprechende CSS-Bereich:

#navlist li {
margin: 0;
}

* html #navlist li{ display: inline;}

#navlist a{
border-top:1px solid #C1C1C1;
display: block;
background-color: #A6A6A6;
padding-left:10px;
padding-right:2px;
padding-top:2px;
padding-bottom:2px
}
* html #navlist a{ width: 100%;}
#navlist a:hover{ background: #efefef;}

Ich hoffe, das hilft dir weiter.

Ciao
Quaese

 

[kevkev]

Hi,

Spitze, danke !

Aber durch die 100% waren die link-boxen größer als .top.
als ich das width weggemacht hatte, sa es so aus wie beim FF !

gruß kevin

 

[Maik]

Spitze, danke !

Frage beantwortet? Problem gelöst? Dann markiere dein Thema bitte als "Erledigt"!

Thanx ;-]