nicht angemeldet
2 Listen nebeneinander Fehler im Firefox ?
Ulysses
2 Listen nebeneinander Fehler im Firefox ?
Ulysses
MudGuardHallo 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>
-
Hallo,
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)...
Wenn ein Code in Firefox und dem IE unterschiedliche Darstellungen ergibt, dann kannst Du mit nahezu 1000%iger Sicherheit davon ausgehen, daß die Darstellung im Firefox die richtige ist ... ;-)
Hat irgendjemand eine Ahnung woran das liegen könnte?
Das "float" für die linke Navigation nimmt diese aus dem Elementfluß heraus. Für die Berechnung der margins zwischen der zweiten Navigation und der Umgebung ist die erste Navigation nicht mehr existent. Du mußt also die margins zwischen Deinem Logo-Absatz und Deiner zweiten Navigation betrachten und dabei bedenken, daß margins kollabieren können, in Deinem Fall der Default-margin-bottom des Absatzes (1.irgendwas em) und der margin-top Deines ersten Listenelementes. Sorge dafür, daß diese beiden margins nicht mehr direkt aneinanderstoßen, dann kollabieren sie auch nicht mehr.
Und der IE 7 kann das tatsächlich immer noch nicht richtig ...?
Viele Grüße
Carsten-
DANKE VIELMALS, euch beiden!!!
Jetzt ist mir wieder einiges klarer geworden. Bin nämlich g'rade erst am Anfang meines "Self-CSS-Studiums"
Lg an Alle
Ulysses
-
-
Hi Ulysses,
<li> Elemente einer Liste, die um ein gefloatetes Element fließt, zeigen im Firefox ein nicht unbedingt zu erwartendes Verhalten, das stimmt. Ob es dafür eine Erklärung (oder falls bug einen Namen) gibt, weiß ich gerade nicht. Beheben kannst du das, indem du die zweite Liste auch nach links floatest.
Die 10em linker Rand der zweiten Liste beziehen sich dann aber auf den rechten Rand der ersten Liste, müsstest du dann auf 1em (oder was immer) setzen.
Gruß
Antipitch -
Hi,
<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>So wie das aussieht, sollte die Navigation2 von der Struktur doch wohl eher Kindelement des li "aktuelle Nav" sein als Geschwister von Navigation1 ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo Andreas,
So wie das aussieht, sollte die Navigation2 von der Struktur doch wohl eher Kindelement des li "aktuelle Nav" sein als Geschwister von Navigation1 ...
Nein, sollte sie nicht. Ich habe lediglich versucht, die Navigation einer bestehenden Website mittels CSS "nachzubauen". Und dort schaut's genau so aus.
Besser für eine übersichtlichen Navigation wäre es aber natürlich, wenn Navigation2 das Kindelement des li "aktuelle Nav" wäre - da hast du vollkommen recht!LG und danke Ulysses
-