nicht angemeldet
Hallo zusammen,
ich brüte mittlerweile schon den dritten Tag über einem Problem, das ich mit meinem CSS-Layout habe. Ein <li>-Element in einer <ul>-Liste, die ich als Navigationsleiste benutzen möchte und an den linken Seitenrand gefloatet habe, lässt sich (im Firefox 2.0 und Opera 9.21, im IE nicht) nicht 'ordentlich' zentrieren. Firefox und Opera lassen sich nicht beirren und stellen die <li>-Elemente innerhalb der <ul>-Liste (gefloatet, Breite: 11em) linksbündig dar, der IE macht es - meiner Meinung nach - korrekt und führt das Zentrieren problemlos aus.
Weder über den - meines Wissens nach nicht standardkonformen - Befehl text-align:center im Elternelement (also <ul>) noch über die auf der Seite
http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/index.htm
empfohlene Methode mit margin-left: auto und margin-right: auto im <li>-Element selbst. Kann sein, das ich seit zwei Tagen ein meterdickes Brett vor meinem Kopf mit mir herumtrage, aber ich kriegs leider nicht vernünftig geregelt bzw. zentriert. Mit einer Hilfskonstruktion, in diesem Fall margin-left und margin-right gleich 1.5em im <li>-Element funktioniert es zwar, aber irgendwie hakt es auch dort manchmal und kommt zu Ungereimtheiten.
Könnte mir vielleicht jemand weiterhelfen und mir sagen, was ich falsch mache bzw. ob es sich um einen Darstellungsfehler in Firefox und Opera (eigentlich doch kaum vorstellbar?!) handelt? Über eine Antwort würde ich mich sehr freuen.
Torben
Hier der relevante Code:
ul#linke_seite {
width: 11em;
float: left;
margin: 0;
text-align: center;
background-color: yellow;
}
ul#linke_seite li {
margin-top: 1em;
margin-bottom:1em;
margin-left: 1.5em;
margin-right: 1.5em; /*Hilfskonstruktion, weil Zentrierung des li-Elements in Firefox und
Opera nicht funktioniert*/
list-style: none;
font-weight: bold;
}
ul#linke_seite a{
width: 8em;
display:block;
padding-top: 0.2em;
padding-bottom: 0.2em;
border: 1px groove black;
text-decoration: none;
font-weight: bold;
}