IE - Firefox - Navigation

[oldputz1990]

Hallo!

Ich habe wieder ein altes Problem, wie immer mit dem Internet Explorer!

Hier meine Navigation im IE:
http://www.bilder-space.de/upload/HIfj5dXfSmTzA5h.png

Das passt alles nicht wirklich zusammen, das Orange ist der Hover Effekt!

So sollte es aussehen:
http://www.bilder-space.de/upload/JZSfKpfYXNGF70w.png


Ich brings einfach nicht hin...

Vl. könntet ihr euch mal die CSS anschaun:

<a href="startseite.html" class="navi" >Startseite</a><p><br />
<a href="startseite.html" class="navi" >Allgemeines</a><p><br />
<a href="startseite.html" class="navi" >Geschichte</a><p><br />
<a href="startseite.html" class="navi" >Kontakt</a><p><br /><br />
<a href="startseite.html" class="navi" >Veranstaltungen</a><p><br />
<a href="startseite.html" class="navi2" >Holzmarkt</a><p>
<a href="startseite.html" class="navi2" >Fronleichnam</a><p><br />
<a href="startseite.html" class="navi" >Sehenswürdigkeiten</a><p><br />
<a href="startseite.html" class="navi2" >Fischerkanzel</a><p>
<a href="startseite.html" class="navi2" >Spitzvilla</a><p>

a.navi:link,visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
	padding: 3px;
	width: 152px;
	position: absolute;

}

a.navi:hover,active{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	background-color: #FF9B00;
	padding: 3px;
	width: 152px;
	border: 1px solid #ffffff;
	position: absolute;

}

a.navi2:link,visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	margin-left: 15px;
	margin-top: 4px;
	padding: 2px;


}

a.navi2:hover,active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	margin-left: 15px;
	margin-top: 4px;
	background-color: #FF9B00;
	padding: 2px;
	border: 1px solid #ffffff;
}

Herzlichen Dank!

 

[Maik]

Hi,

ich kann da jetzt mit dem gezeigten Quellcode keine sonderlichen Unterschiede beim Hover-Effekt in den beiden genannten Browsern ausmachen, dennoch empfehle ich dir, die Navigation "handelsüblich" mit einem Listenelement auszuzeichnen und anschliessend wie gewünscht mit CSS zu formatieren.

Das führt nämlich erstens im Vergleich zu deinem gezeigten HTML-Code zu einem wohlgeformten Markup, da das p-Element, das du zudem nicht ordnungsgemäß mit dem </p>-Tag geschlossen hast, und das br-Element überhaupt nicht benötigt wird, um Zeilenumbrüche und Abstände im Textfluss zu erzeugen, und zweitens stellen die Browser solch ein CSS-gestütztes Listenmenü einheitlich dar, denn der von dir mit dem <br>-Tag erzeugte Zeilenabstand zwischen den Menüpunkten wird von den Browsern unterschiedlich hoch interpretiert, respektive angezeigt.

Hier noch zwei interessante Links, die dich der Thematik näherbringen:

• Site-Navigation mit Listen — Grundaufbau (deutschsprachiges Tutorial)
• Listamatic - one list, many options (zahlreiche Beispiele für vertikale u. horizontale Listenmenüs zur Inspiration)