Div verrutscht

**n4noraz0r** · 29. 12. 2011, 11:01

Hallo, ich habe eine feststehende Navigation für meine Seite erstellt. Die Links sind dabei aber nach rechts unten verrutscht! Ich finde die Lösung für dieses Problem einfach nicht, kann mir jemand helfen?

HTML-Code:

<html>
	<head>
		<title> - </title>
		<link rel="stylesheet" type="text/css" href="style/main.css">
		<link rel="stylesheet" type="text/css" href="style/navi.css">
		<!--[if gte IE 5]>
			<link rel="stylesheet" type="text/css" href="style/ie.css">
		<![endif]-->
	</head>
	<body>
		<div id="wrap1">
			<div id="header">
				<img src="images/header.png" />
			</div>
			<div id="navi" onmouseover="this.style.backgroundColor='#a7d2e0';" onmouseout="this.style.backgroundColor='#c6dfe7';">
				<ul>
					<li>Hier Steuerung 1</li>
					<li>Hier Steuerung 2</li>
					<li>Hier Steuerung 3</li>
					<li>Hier Steuerung 4</li>
				<ul>
			</div>

<-head.php, wird in index.php eingebunden

Code:

#navi{
	background-color: #c6dfe7;
	width: 225px;
	float: left;
	height: 100px;
	border: 1px solid black;
	position: fixed;
	padding: 0;
	}
	
#navi ul li{
	width: 225px;
	background-color: red;
	height: 25%;
	list-style-type: none;
	}

<- das Stylesheet für die Navigation

**Kugelfisch23** · 29. 12. 2011, 11:17

Wird durch deine übergeordnete Datei, in welche du das gepostete HTML-Fragment inkludieren lässt, eine DOCTYPE-Deklaration ausgeliefert? Wenn nicht, wird deine Seite im Quirks-Mode dargestellt, was kaum sinnvoll ist und zu einer nur schwer vorhersagbaren Darstellung führt (siehe http://board.gulli.com/thread/22294...-quirks-mode-/).

Abgesehen davon werden in den User-Agent-Stylesheets in aller Regel Aussen- (margin) oder Innenabstände (padding) für ul und/oder li-Elemente gesetzt, zumindest um die Listenpunkte aufzunehmen. Diese Eigenschaften solltest du für das ul- und die li-Elemente deshalb explizit mit 0 überschreiben, sofern du keine klassische Liste mit Listenpunkten darstellen möchtest.

Auch ist deine Conditional-Comment-Bedingung

HTML-Code:

<!--[if gte IE 5]>

kaum sinnvoll. Schliesslich verhalten sich IE 8 und insbesondere IE 9 inzwischen mehr oder weniger standardkonform, ein IE-spezifisches Stylesheet könnte in diesen Versionen eher zu fehlerhafter Darstellung führen. IE-Versionen < 5 werden hingegen - so du diese unterstützen möchtest - bestimmt Anpassungen benötigen. Sinnvoller wäre in vielen Fällen

HTML-Code: