nicht angemeldet
UlyssesHallo allerseits!
Ich habe folgendes Problem:
Wenn ich zwei Listen <ul> nebeneinander stelle (die linke mit float: left), dann unterschlägt mir Firefox den margin-top im ersten Listeneintrag der rechten Liste. Somit beginnt die rechte Liste nicht auf der selben Höhe, wie die Linke. Der IE7 macht es hingegen genau so, wie ich es mir vorstelle (ein seltener Fall)...
Hat irgendjemand eine Ahnung woran das liegen könnte?
Hier also der Code (hab's zur Veranschaulichung recht bunt gestaltet):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=us-ascii">
<title>2 Navigationslisten nebeneinander</title>
<style type="text/css">
body {
background-color:#C0C0C0;
font-family: Arial, sans-serif;
font-size: 100.01%;
min-width: 500px;
}
a {
display: block;
padding: 0;
margin: 0;
}
a:link {
background-color: #C0C0C0;
color: #000000;
}
a:visited {
background-color: #C0C0C0;
color: #666;
}
a:focus {
background-color: #0000FE;
color: #000000;
}
a:hover {
background-color: #0000FE;
color: #000000;
}
a:active {
background-color: #C0C0C0;
color: #FFFFFF;
}
div#Container {
background-color: #FFFFFF;
color: #000000;
font-size: 0.8em;
margin: auto;
max-width: 65em;
}
div#NavBox {
background-color: #FFFF80;
float: left;
margin: 1em;
width: 21em;
}
ul#Navigation1 {
background-color: #008000;
float: left;
margin: 0;
padding: 0;
width: 9em;
}
ul#Navigation1 li {
background-color: #00FFFF;
font-weight: bold;
list-style: none;
margin: 1em 0 1em 0;
padding: 0.2em;
}
ul#Navigation2 {
background-color: #FF0000;
margin: 0 0 0 10em;
padding: 0;
width: 9em;
}
ul#Navigation2 li {
background-color: #00FFFF;
font-weight: bold;
list-style: none;
margin: 1em 0 1em 0;
padding: 0.2em;
}
div#Inhalt {
background-color: #FFFFFF;
border-left: 2px solid red;
margin: 0 0 0 23em;
padding: 1em;
}
</style>
</head>
<body>
<div id="Container">
<div id="NavBox">
<p>LOGO</p>
<ul id="Navigation1">
<li><a href="#">Nav1</a></li>
<li>aktuelle Nav</li>
<li><a href="#">Nav3</a></li>
<li><a href="#">Nav4</a></li>
<li><a href="#">Nav5</a></li>
</ul>
<ul id="Navigation2">
<li><a href="#">Nav2a</a></li>
<li><a href="#">Nav2b</a></li>
<li><a href="#">Nav2c</a></li>
</ul>
</div>
<div id="Inhalt">
<p>INHALT</p>
<p>Text Text Text Text Text TextText Text TextText Text
TextText Text Text</p>
<p>Text Text TextText Text TextText Text TextText Text
TextText Text TextText Text TextText Text TextText Text
Text</p>
<p>Text Text Text</p>
<p>Text Text TextText Text TextText Text TextText Text
TextText Text TextText Text TextText Text TextText Text
TextText Text TextText Text TextText Text TextText Text
TextText Text TextText Text TextText Text TextText Text
TextText Text TextText Text TextText Text TextText Text
Text</p>
</div>
</div>
</body>
</html>
MudGuard