nicht angemeldet
Hallo Zusammen,
ich kann mir nicht erklären, wieso das unten folgende, sehr einfache Code-Schnipsel sich derart den Erwartungen widersprechend verhält.
Was ich erwarte: Eine Box, schwarz umrandet, die die ganze Breite des Browsers einnimmt. Darin eine Box mit roter Hintergrundfarbe, die die äussere Box vollständig füllt. In diesem roten Block wiederum - in der Mitte der Seite zentriert - drei Listenelemente, als Block gelb umrandet.
Weder Firefox noch der IE stellen das so dar. Am ehesten noch der IE, aber das ist vermutlich nur ein Bug ;-)
Im FF ist oberhalb und unterhalb der roten Box eine weiße freie Fläche, der gelb umrandete Block mit den Listenelementen ist linksbündig.
Im IE ist fast alles richtig, nur ist unterhalb des gelben Blockes eine freie Fläche entstanden.
Ich bin mittlerweile seit Stunden am recherchieren und probieren, vielleicht hat ja noch jemand eine Anregung.
Wichtig: mindestens der äussere Span und die ul-Aufzählungsliste müssen im HTML-Output erhalten bleiben, das div kann notfalls auch weg.
Ich danke Euch vielmals, Hans
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
#navigation {
border:1px solid #000;
width:100%;
display:block;
}
#navigation div {
background-color:red;
width:100%;
text-align:center;
}
#navigation div ul {
width:150px;
border:1px solid yellow;
}
//-->
</style>
</head>
<body>
<span id="navigation">
<div>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</div>
</span>
</body>
</html>