Eine Liste von A - Z, horizontal zentriert...

Status
Nicht offen für weitere Antworten.
J

jackob100

Mitglied
Hallo

Ich möchte gerne eine Liste mit Buchstaben von A - Z horizontal zentriert darstellen.

Mit dem Firefox geht es so super, nur der IE macht Probleme mit der Zentrierung.

Woran liegt das?


HTML: 
<div class="sortierungAZ">
	<ul>
        <li><a href="A">A</a></li>
        <li>|</li><li><a href="B">B</a></li>
        <li>|</li><li><a href="C">C</a></li>
        </ul>
</div>


HTML: 
div.sortierungAZ	{
			margin:0px auto;
			padding: 0px;
			width: 500px;
			font-size: 11px;
			text-align:center;
			}
			
div.sortierungAZ ul	{
			margin: 0 auto;
			list-style: none;
			}

div.sortierungAZ li	{
			float:left;
			margin: 0 auto;
			padding:5px 5px 4px 5px;
			list-style: none;
			}

div.sortierungAZ a 	{
			display:block;
			padding:0px;
			text-decoration:none;
			font-family: Arial, Helvetica, sans-serif;
			font-weight:bold;
			color:#000000;
			}
			
div.sortierungAZ a:hover	{
				color: #00358A;
				text-decoration: underline;
				}
					
li.active		{
						padding:5px 5px 4px 5px;
						font-family: Arial, Helvetica, sans-serif;
						font-weight:bold;
						font-size: 11px;
						color: #EBBC00;
						text-decoration: none;
						}
 
Hi,

kann es sein, dass du das Dokument den Browsern im Quirksmodus übergibst?

Denn in diesem Darstellungsmodus unterstützt der IE das CSS-Boxmodell nicht, in deinem Fall die margin:0 auto-Deklaration zum horizontalen Zentrieren des DIV-Elements. Beim Listenelement kann es so nicht funktionieren, da zur margin-Eigenschaft eine Breitenangabe fehlt.

Im Standardsmodus zentriert der IE bei mir das Element einwandfrei im Viewport. Ein Rahmen um das Element verdeutlicht dies eindrucksvoll.
 
kann es sein, dass du das Dokument den Browsern im Quirksmodus übergibst?
Zum Vergrößern anklicken....

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Beim Listenelement kann es so nicht funktionieren, da zur margin-Eigenschaft eine Breitenangabe fehlt.
Zum Vergrößern anklicken....

Listenelemente müssen also immer eine feste Breite haben und zusammen gezählt die Breite vom <ul> ergeben? habe ich dich so richtig verstanden?
 
Dies gilt nicht nur für das Listenelement, sondern grundsätzlich für alle Elemente, die mittels margin:0 auto horizontal zentriert werden sollen.
 
oke...

da ich von Link zu Link immer den gleichen Abstand möchte, müsste ich für jedes Element die genaue Breite ausrechnen!

gibt es nicht noch eine ander Möglichkeit für mein Vorhaben? einfach keine Listenelemente?

wir würdest du das lösen?
 
Hast du denn auch alle relevanten Codeschnipsel aus dem Beispiel übernommen, wie beispielsweise auch den Conditional Comment, der nach dem Stylesheet notiert ist?
 
:eek: Tatsächlich, der IE7 richtet das zweite Menü vertikal aus.

Wenn ich ihn im Conditional Comment mit dem Operator "lte" mit einbeziehe, richtet er die Liste horizontal aus und zentriert sie im Anzeigebereich, wie seine Vorgängerversionen:

Code: 
<!--[if lte IE 7]>
<style type="text/css">
#menu2 li {
  float:left;
  }
#menu2 a {
  float:left;
  }
.container {display:inline-block;}
</style>
<![endif]-->
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück