Hallo,
ich versuche mich seit ein paar Wochen an CSS und habe mir in den Kopf gesetzt, ein Dropdown Menu zu testen. Soweit so gut. Es wird nun im IE (7) korrekt angezeigt (was eigentlich das Ziel war), aber im FF leider dafür nicht mehr. Sowohl die Abstände stimmen nicht, als auch die Hintergrundfarbe der Navigationsbox. Ich hab schon etliches nachgelesen, auch den Validationscheck drüberlaufen lassen, aber komme nicht auf das Problem. Hat jemand vielleicht eine Idee?
#nav, #nav ul {
padding: 0;
margin-left: 0px;
list-style: none;
background-color: #ffffff;
width: 56.25em;
line-height: 1.5;
font-weight: bold;
border: solid #0e5681;
border-width: 1px 0;
}
#nav a {
display: block;
width: 10em;
padding: 0.25em 3em;
}
#nav li {
float: left;
width: 10.5em;
font-size: 12px;
}
Problem 1, Höhe der UL#nav:
Die LI-Elemente im UL#nav werden durch FLOAT aus dem normalen Fluss genommen. Dadurch beeinflussen sie die Höhe der UL#nav nicht mehr. Diese ist also 0px hoch. Die Hintergrundfarbe deshalb auch nicht sichtbar.
Lösung:
Ein HEIGHT-Wert für UL#nav
oder
overflow:hidden für UL#nav wunderwaffe-overflow
Problem2, Breite der #nav li:
Die ist bei Dir sehr widersprüchlich definiert. Einersets sagst Du, die A-Elemente in diesen LI-Elemente sollen 3em+10em+3em = 16em breit sein. Dann sagst Du aber, die LI-Elemente selbst sollen nur 10.5em breit sein. Was denn nun? Wenn es wie im IE aussehen soll, dann lass die Breitenangabe für die #nav li einfach weg.
Btw: Wofür sind eigentlich die DIV-Elemente gut, in denen die A-Elemente stehen?
<ul id="nav">
...
<li>
<div><a href="">Therapie</a></div>
...
viele Grüße
Axel