Navigation im IE6 wird vertikal statt horizontal angezeigt - ab IE7, FF, Op, Sa funkt

dwex

Erfahrenes Mitglied
Hallo Leute,

ich stehe wieder mal vor einem für mich vollkommen unlösbaren Problem.

Ich habe eine Navigation welche in allen Browsern ausser dem "berühmten" IE6 korrekt angezeigt wird. (siehe Bilder - die horizontale Navigation ist die richtige - das fehlerhafte PNG im IE6 ignoeriere ich)

Der HTML-Quellcode (Ausschnitt) ist folgender:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
...
...
<div id="topnav">
		<div id="topnavigation">
			<ul class="menu-top">
				<li class="menu-sibling menu-first">
					<a href="./index.php" target="_top">Home</a>
				</li>
				<li class="menu-sibling">
					<a href="./impressum.php" target="_top">Impressum</a>
				</li>
				<li class="menu-current">
					<a href="./kontakt.php" target="_top">Kontakt</a>
				</li>
				<li class="menu-sibling">
					<a href="./was-machen-wir.php" target="_top">Was machen wir</a>
				</li>
				<li class="menu-sibling">
					<a href="./galerie.php" target="_top">Galerie</a>
				</li>
				<li class="menu-sibling menu-last">
					<a href="./referenzen.php" target="_top">Referenzen</a>
				</li>
			</ul>
		</div>
</div>
Das CSS dazu Sie so aus:
CSS:
#topnav {
	background-image:url(./images/bg_nav_oben.jpg);
	height: 29px;
	padding: 0px;
	margin: 0px;
	border-bottom: 1px solid rgb(70,75,81);
}

#topnavigation {
	margin: 0px 20px 0px 0px;
	position:relative;
	top: 0px;
}

#topnavigation ul {
	padding: 0px;
	margin: 0px;
}

#topnavigation li {
	list-style-type: none;
	float:left;

}

#topnavigation a:link, #topnavigation a:visited, #topnavigation a:active {
	padding: 7px 40px 0px 20px;
/*	text-shadow: #c0c0c0 2px 2px 3px;*/
	display: block;
	color: gray;
	text-decoration: none;
	font-weight: bold;
	font-size: 12px;
	/*background-color:yellow;*/
	background-image:url(./images/bg_strich_nav_oben.png);
	background-repeat: repeat-y;
	background-position: right bottom;
	height: 21px;
}
#topnavigation a:hover {
	color:rgb(54,93,148);
	/*text-shadow: #c0c0c0 2px 2px 3px;*/
	text-decoration: none;
	font-weight: bold;
}


#topnavigation ul li.menu-current a:link,
#topnavigation ul li.menu-current a:visited {
color:rgb(54,93,148);
}

Wahrscheinlich muss ich für den IE6 eine eigene CSS einbinden - das hätte ich versucht aber ich bekomme das einfach nicht hin.

Ich würde mich sehr freuen wenn mir jemand helfen könnte was ich falsch mache.
Vielen Dank für eure Hilfe im voraus!
 

Anhänge

  • korrekte_anzeige.jpg
    korrekte_anzeige.jpg
    6,4 KB · Aufrufe: 9
  • falsche_anzeige_ie6.jpg
    falsche_anzeige_ie6.jpg
    14,3 KB · Aufrufe: 10
Vergib doch mal eine feste Breite für die Listen-Elemente, eventuell noch als "inline" deklarieren.
 
Zurück