Unterschiedliche Interpretation der Navigation von IE und Firefox

[karmababy]

Hallo.

Ich bastle gerade an einer eigenen Hompage herum und habe nun das Problem, dass mir meine Navigation im IE und im Firefox unterschiedlich dargestellt wird.Ich weiß ja das es da Probleme gibt bei der Nutzung von margin und padding aber leider weiß ich nicht wie ich es anders lösen soll.Verwende im Moment noch keine Doctype aber kann ich damit das Probelm irgendwie in den Griff kriegen?
Hier mal ein Ausschnitt aus dem Code:

 <style type="text/css">
 
 a.menu { display: inline; margin-top: 4px; margin-bottom:4px; margin-left: 5px; text-align:center; width:13ex;
 		 border-style:solid; border-width:2px; padding:0px; text-decoration:none; }
 
 a.menu:link	{ color:#191970; background-color:transparent; }
 a.menu:visited { color:#191970; background-color:transparent; }
 a.menu:hover   { color:#FFFFFF; background-color:#191970; }
 a.menu:active  { color:#FFFFFF; background-color:#191970; }
 
 
 </style>

Ich hoffe es jemand ne Idee und kann mir da weiterhelfen.
Vielen Dank schonmal.

mfg
karma

 

[Gumbo]

Elemente können nur in der Block-Darstellung Ausmaße zugewiesen werden. Dass der Internet Explorer dies auch in der Inline-Darstellung macht, ist eines der vielen Mysterien des Internet Explorers.

Pack am besten jeden Verweis in ein eigenes Listenelement einer ungeordneten Liste undsetze den Fluss der Elemente auf float: left. Dann kannst du die einzelnen Verweise wieder mithilfe der Block-Darstellung Ausmaße zuweisen.

<ul class="menü">
	<li><a href="http://example.net/">Beispieltext</a></li>
	<li><a href="http://example.net/">Beispieltext</a></li>
	<li><a href="http://example.net/">Beispieltext</a></li>
</ul>

ul.menü {
	list-style:		none;
}
ul.menü li {
	float:			left;
}
ul.menü li a:link,
ul.menü li a:visited {
	width:			15ex;
}

 

[karmababy]

HI.

Erstmal vielen Dank für die Antwort.Nun siehts auf jeden Fall mal im IE und im Firefox gleich aus.
Leider funktioniert der eigentliche Hover-Effekt nicht mehr als solches wie ichs mir gedacht habe.

 <style type="text/css">
 ul.menu {
 	list-style:none;}
 
 ul.menu li {
 	float:left; border-style:solid; border-width:2px; padding-left:2px; padding-right:2px; margin:4px;}
 
 ul.menu li a:link 	{ color:#191970; background-color:transparent; },
 ul.menu li a:visited 	{ width:13ex;color:#191970; background-color:transparent;}
 ul.menu li a:hover 	{ color:#FFFFFF; background-color:#191970; }
 ul.menu li a:active 	{ color:#FFFFFF; background-color:#191970; }
 
 </style>

Ist da ein Fehler drin? Zudem hätte ich den Unterstrich nicht gerne.Kann man den irgendwie wegkriegen?


mfg
karma

 

[karmababy]

Hat sich erledigt, habs selbst herausgefunden.Also den Blödsinn den ich vorher geschrieben hab einfach vergessen.


mfg
karma

 

[Gumbo]

Für's Protokoll: Bei den Pseudo-Klassen ist insbesondere deren Reihenfolge (:link, :visited, :hover, :active, :focus) wichtig, da dort die Kaskadenregel greift.

 

[karmababy]

Ok.Nochmals danke für den Tip.Funktioniert super.Wieder was dazu gelernt.

mfg
karma