Hi,

ich habe ein kleines CSS Problem. Fehlerhafte Darstellung im FF.

Ich habe eine Liste als Navigation. Hier der CSS Code:

Code :

1 2 3 4 5 6 7

#menu ul, #menu ul li{ list-style-type: none; margin-left: 0.4em; width: 93%;     }

Im IE7 wird es korrekt dargestellt:

Hauptsektion 1
__Untersektion 1.1
__Untersektion 1.2
Hauptsektion 2
__Untersektion 2.1
__Untersektion 2.2
__Untersektion 2.3
Hauptsektion 3
__Untersektion 3.1

usw.

Aber im FF zeit er es so an:

Hauptsektion 1
___________Untersektion 1.1
___________Untersektion 1.2
Hauptsektion 2
___________Untersektion 2.
___________Untersektion 2.2
___________Untersektion 2.3
Hauptsektion 3
___________Untersektion 3.1

Es ist quasi alles nach recht verschoben.
Wie bekomme ich es hin das es im FF auch so dargestellt wird wie im IE7 ?

Hallo,

IE und FF bewerkstelligen die Einrückung bei Listen auf unterschiedliche Weise. IE verwendet margin, während FF auf padding setzt. Setze deshalb padding-left auf 0, um eine einheitliche Darstellung zu erreichen.

Grüße,
Matthias

ok, danke hat geklappt.

Das einzige was jetzt noch nicht klappt ist die vertikale Ausrichtung. im FF ist es etwas nach unten gerutscht. Hab schon mit Padding-top: 0 probiert aber leider ohne Erfolg...

Hi,

wie lautet denn der vollständige Quellcode (HTML + CSS) des Dokuments?

css:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#menu ul, #menu ul, li{ list-style-type: none; margin-left: -2px; width: 93%; padding-left: 8px; vertical-align: text-top;       }       #menu li.sub{    list-style: circle;    margin-left: 0.2em;   }

html:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<div valign="top"> <!-- Menue begin -->     <div id="menu" align="left"><ul><li><a href="/index.php?id=1" title="Startseite" >Start</a></li> <li class="active"><a href="/index.php?id=2" title="Über uns" >Über uns</a> <ul><li><a href="/index.php?id=3" title="Geschichte >Geschichte</a></li> <li><a href="/index.php?id=4" title="Vorstand" >Vorstand</a></li> <li><a href="/index.php?id=5" title="Satzungen" >Satzungen</a></li> <li class="last"><a href="/index.php?id=6" title="Mitgliedsantrag" >Mitgliedsantrag</a></li> </ul> </li> <li><a href="/index.php?id=7" title="Aktuelles" >Aktuelles</a></li> <li><a href="/index.php?id=8" title="Online-Umfrage" >Online-Umfrage</a></li> <li><a href="/index.php?id=10" title="Bla1" >Bla1</a></li> <li><a href="/index.php?id=13" title="Bla2" >Bla2</a></li> <li><a href="/index.php?id=27" title="Bla3" >Bla3</a></li> <li><a href="/index.php?id=40" title="Links" >Links</a></li> <li><a href="/index.php?id=41" title="Kontaktaufnahme" >Kontakt</a></li> <li class="last"><a href="/index.php?id=42" title="Impressum" >Impressum</a></li> </ul></div> <!-- Menue end --> </div>

Ich kann da keinen Unterschied in der vertikalen Ausrichtung zwischen FF und IE entdecken.