✔ rechtsbündiges Menü

[Superdok]

Hallo ich habe gerade versucht ein rechtsbündiges Menu zu erstellen, d.h. alle Menüpunkte sollen nach rechts ausgerichtet sein:

HTML

<div id="navigation">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Test1</a></li>
  <li><a href="#">Test2</a></li>
</ul>
</div>

CSS:

#navigation ul {
	list-style-type: none;	
	margin: 0px;
	padding: 0px;	
}
#navigation ul li {
	display:inline;	
	float:right;
	margin: 0px;
	padding: 0px;
	border:none;
	float:right;
}
#navigation ul li a{	
	text-decoration: none;
	font-size: 14px;
	margin: 0 8px;
	color: #000000;
	float:right;
}
#navigation ul li a:hover {	
	text-decoration: none;
	font-size: 14px;

Komischerweise funktionierts im IE 6, nicht aber im Firefox. Wo ist der Fehler?

 

[Maik]

Hi,

wenn die Darstellung des Menüs im IE6 so richtig ist, lautet das Stylesheet an diesen Stellen stattdessen:

#navigation ul li {
        text-align: right;
        margin: 0px;
        padding: 0px;
        border:none;
}
#navigation ul li a{
        text-decoration: none;
        font-size: 14px;
        margin: 0 8px;
        color: #000000;
}

mfg Maik

 

[Superdok]

Vielen Dank, es funktioniert aber es gibt mit dem selben Menü ein weiters Problem. Dieses Mal mit dem IE6:

#navigation ul li {	
	margin: 0px;
	padding: 0px;
	border:none;
	text-align:right;
}
#navigation ul li a{	
	text-decoration: none;	
	color: #FFF;	
	text-align:right;	
}
#navigation ul li a:hover {	
	text-decoration: none;	
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #fff;	
	text-align:right;	
}

Ich habe bei a:hover eine border hinzugefügt. Im Firefox wird sie richtig dargestellt, im IE 6 auch bei allen Links außer dem letzen (da kommt sie komischerweise nicht). Außerdem sind nun die Menüpunkte sehr nah bei einander (IE6).

HTML sieht nun so aus:

<div id="navigation">
		<ul>	
  			<li><a href="#"><font size="3">Link zum Testen</font></a></li>  
  			<li><a href="#"><font size="1">Link zum Testen</font></a></li>  
  			<li><a href="#"><font size="4">Link zum Testen</font></a></li>  
		</ul>
	</div>

Die unterschiedlichen Größen sind beabsichtigt. Was hab ich jetzt wieder falsch gemacht?

EDIT: Mein Fehler, die Größe des divs #navigation war zu klein...