Frage zu text-align wegen IE 5.x

[Markus Pitha]

Hi,
dadurch, dass der IE 5.x nicht fähig ist, mit margin-left:auto und margin-right:auto die div-Container mittig auszurichten, muss ich für einen div-Container zusätzlich text-align:center angeben, wodurch natürlich auch der Text in die Mitte rutscht. Durch ein Stylesheet .links {text-align:left} biege ich es wieder hin, indem ich in der Definition folgendes schreibe:

<div class="box links">
.
.
</div>

Wobei "box" der Container ist, der mittig ausgerichtet wird und auch die text-align:center Angabe enthält.
Dadurch, dass ich keinen IE 5.x zur Verfügung habe, frage ich mich, ob dieses Vorhaben so überhaupt funktioniert. Wie weiß ich, ob die "links"-Definition nicht auch die ganze box nach links versetzt? Im Mozilla 1.7.6 und Opera 8.0 (Linux) funktioniert es eigentlich. Dummerweise ist der IE bekanntlich etwas eigen. Kann ich nun davon ausgehen, dass der IE es auch so darstellt?

Markus.

[Gunnar Bittersmann]

<div class="box links">

Wobei "box" der Container ist, der mittig ausgerichtet wird und auch die text-align:center Angabe enthält.

Markus,
Das div gehört beiden Klassen an, es gelten also beide Deklarationen:

.box {text-align:center}  
.links {text-align:left}

Da die Spezifität gleich ist, entscheidet die Reihenfolge, welche angewandt wird.

text-align:center musst du für einen Vorfahren dieses div angeben und für dieses div dann wieder text-align:left.

Live long and prosper,
Gunnar

[Ingo Turski]

Hi,

Da die Spezifität gleich ist, entscheidet die Reihenfolge, welche angewandt wird.

Ich habe das eher so verstanden: .box [margin:0 auto}.
Und das sollte im IE 5 funktionieren und auch hier text-align nur auf den Inhalt wirken.

freundliche Grüße
Ingo

[Markus Pitha]

Hallo,

Ich habe das eher so verstanden: .box [margin:0 auto}.
Und das sollte im IE 5 funktionieren und auch hier text-align nur auf den Inhalt wirken.

Also der Inhalt von .box sieht so aus:

.box {border:1px solid #ffa63d;
     width:750px;
     background-color:#ffddb4;
     background-image:url("pics/indexhintergrund.jpg");
     background-repeat:repeat-x;
     margin-left:auto; margin-right:auto;
     margin-top:10px; margin-bottom:10px;
     text-align:center} /*wegen Internet Explorer 5.x*/

.links {text-align:left}

Ohne text-align:center würde es im IE 5.x wahrscheinlich nicht mittig ausgerichtet werden.

Markus.

[Gunnar Bittersmann]

background-color:#ffddb4;
     background-image:url("pics/indexhintergrund.jpg");
     background-repeat:repeat-x;

background:#ffddb4 url("pics/indexhintergrund.jpg") repeat-x;
wäre kürzer.

margin-left:auto; margin-right:auto;
     margin-top:10px; margin-bottom:10px;

margin: 10px auto;
wäre kürzer.

text-align:center} /*wegen Internet Explorer 5.x*/

Das, wie gesagt, nicht für .box, sondern einen Vorfahren (am besten sicher das Elternelement)

.links {text-align:left}

Das könntest du dann auch für .box angeben, dann brauchst du nicht zwei Klassen.

Hast du überhaupt mehrere von diesen Boxen? Sonst wäre id statt class zu überlegen.

Live long and prosper,
Gunnar

[MudGuard]

Hi,

background-color:#ffddb4;
     background-image:url("pics/indexhintergrund.jpg");
     background-repeat:repeat-x;

background:#ffddb4 url("pics/indexhintergrund.jpg") repeat-x;
wäre kürzer.

ist aber nicht äquivalent.

cu,
Andreas

[Gunnar Bittersmann]

ist aber nicht äquivalent.

Andreas,
Muss ich den Unterschied sehen?

Live long and prosper,
Gunnar

[MudGuard]

Hi,

background-color:#ffddb4;
     background-image:url("pics/indexhintergrund.jpg");
     background-repeat:repeat-x;

background:#ffddb4 url("pics/indexhintergrund.jpg") repeat-x;

ist aber nicht äquivalent.

Muss ich den Unterschied sehen?

Ist doch offensichtlich: background setzt 5 Eigenschaften.
Es wurden aber nur 3 einzelne background-xxx Eigenschaften gesetzt.

cu,
Andreas

[Markus Pitha]

Hallo,

Da die Spezifität gleich ist, entscheidet die Reihenfolge, welche angewandt wird.

Ja, aber mich verwirrt es irgendwie, warum der Container weiß, dass er bei der 2. Angabe nicht wieder die ganze box verschieben soll, sondern nur den Text?

Markus.

[CarstenP]

Hallo,

Ja, aber mich verwirrt es irgendwie, warum der Container weiß, dass er bei der 2. Angabe nicht wieder die ganze box verschieben soll, sondern nur den Text?

text-align wirkt immer auf den *Inhalt* der Box, für die es angegeben wird. Die Box selbst bleibt davon gänzlich unbeeindruckt. Daher brauchst Du den übergeordneten Container, damit in den alten IEs das text-align überhaupt eine Ausrichtung Deiner Box bewirken kann.

Viele Grüße
Carsten

[Markus Pitha]

Hallo,

text-align wirkt immer auf den *Inhalt* der Box, für die es angegeben wird. Die Box selbst bleibt davon gänzlich unbeeindruckt. Daher brauchst Du den übergeordneten Container, damit in den alten IEs das text-align überhaupt eine Ausrichtung Deiner Box bewirken kann.

Danke. Jetzt ist es mir klar.

Markus.

[Detlef G.]

Hallo Markus

Dadurch, dass ich keinen IE 5.x zur Verfügung habe, frage ich mich, ob dieses Vorhaben so überhaupt funktioniert.

Du kannst den IE 6.0 zum Testen in den Quirks-Modus schicken,
Dokumenttyp-Deklaration weglassen oder einen Kommentar in die erste Zeile der
Seite schreiben. Dann macht er den grösten Teil der Fehler des IE 5.x auch.

Auf Wiederlesen
Detlef

[Markus Pitha]

Hallo,

Du kannst den IE 6.0 zum Testen in den Quirks-Modus schicken,
Dokumenttyp-Deklaration weglassen oder einen Kommentar in die erste Zeile der
Seite schreiben. Dann macht er den grösten Teil der Fehler des IE 5.x auch.

Werd ich mir merken, danke.

Markus.