Möglicher Firefox CSS-Pfusch: text-align wird ignoriert.

sosum

Hallo Leute,

ich habe heute eine merkwürdige Entdeckung gemacht: bei einem absolut-positioniertem DIV ignoriert der Firefox die text-align:right -Anweisung, wenn die Breite nicht angegeben ist.

Ich habe schon einige knifflige CSS-Sachen hinter mir, aber noch NIE waren Opera 7 und IE einer Meinung, währen der Fuchs einen Seitensprung wagte. Daher verdächtige ich hier den Fuchs des Pfusches.

Kommt mir bitte, wie bei anderen User nicht mir Aussagen, das der FireFox recht hat, weil er standardkonform ist und blabla. Größtenteils stimmt das. Aber die css-Direktive text-align ist laut standard für ALLE BLOCK Elemente anwendbar, unabhängig davon, wie sie positioniert werden.

Ich habe festgestellt, dass der FireFox den Fehler nur bei absoluten Positionierungen macht. Der logischste Schluss hieraus wäre, das FF meint, eine Layer sein kein Blockelement. Dies halte ich für falsch. Erstens, weil das Beispieldokument einwandfrei nach HTML-strict validiert und zweitens, weil der DOM-Inspector von FF im computed style sehr wohl Blockelement Eigenschaften für das DIV ausweist.

Kann mir jemand das nun vernünftig erklären, oder pfuscht er wirklich?

Grüße,
aron

BSPCODE:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Palais e.V. - Portal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="" rel="stylesheet" type="text/css">
<script type="text/JavaScript" src=""></script>
<script type="text/JavaScript">
</script>
<style type="text/css">
body { margin:0;padding:0; }


/* Das Infomenü für jugendhilfe */
#jugendhilfe {
	position:absolute;top:20px;left:200px;
	width:300px; /*debug entry*/ 

	text-align:right;
	border:1px solid red;
	font-family:arial; font-size:10px;
}


#pfusch {
	position:absolute;top:200px;left:200px;
	/*width:300px; /*debug entry*/ 

	text-align:right;
	border:1px solid red;
	font-family:arial; font-size:10px;
}


#analogie {
	position:relative;top:200px;left:200px;
	text-align:left;
	border:1px solid red;
	font-family:arial; font-size:10px;
}


h1 {
	margin:0;padding:0;padding-right:4px;padding-left:200px;
	color:red;font-weight:normal;font-size:16px;
	border-top:1px solid red;border-right:1px solid red;
}


p {
	margin:0;padding:0;padding-right:4px;text-align:right;
}
</style> 
</head>


<body>
	<div style="position:absolute;top:0px;left:0px;border:1px solid #00f">
		<div id=jugendhilfe>
			<p>Erzieherische Hilfen
			<p>Jugendberufschule
			<p>Schulsozialarbeit
			<p>Schulverweigerung
			<h1>Kinder und Jugendhilfe</h1>
		</div>

		<div id=pfusch>
			<p>Erzieherische Hilfen
			<p>Jugendberufschule
			<p>Schulsozialarbeit
			<p>Schulverweigerung
			<h1>Kinder und Jugendhilfe</h1>
		</div>

		<div id=analogie>
			<p>Erzieherische Hilfen
			<p>Jugendberufschule
			<p>Schulsozialarbeit
			<p>Schulverweigerung
			<h1>Kinder und Jugendhilfe</h1>
		</div>
	</div>
</body></html>

Alles anzeigen

wobre

Zitat von sosum

Daher verdächtige ich hier den Fuchs des Pfusches. Kann mir jemand das nun vernünftig erklären, oder pfuscht er wirklich?

Nein, nein. FF zeigt dir "deinen Pfusch" richtig an.
Beweis:
Tausche mal nachfolgenden Code bei dir aus ( lasss das CSS so wie es ist) und schau dir das Ergebnis in den 3 Browsern an - Welche Einigkeit zwischen IE und Opera!? Nur der Fox zeigt tatsächlich, was du im Code vorgibst.

Code

<div id=jugendhilfe>
         <p>Erzieherische Hilfen
         <p>Jugendberufschule
         <p>Schulsozialarbeit
         <p>Schulverweigerung
         <h1>Kinder und Jugendhilfe</h1>
      </div>


      <div id=pfusch>
         <p>liegt bei IE unter analogie
         <p>Jugendberufschule
         <p>Schulsozialarbeit
         <p>Schulverweigerung
         <h1>Kinder und Jugendhilfe</h1>
      </div>


      <div id=analogie>
         <p>IE und Opera einig?
         <p>Jugendberufschule
         <p>Schulsozialarbeit
         <p>Schulverweigerung
         <h1>Kinder und Jugendhilfe</h1>
      </div>

Alles anzeigen

Da gibts noch was für dich zu tun, aber du hast ja schon einige knifflige CSS-Sachen hinter dir.

Gertrud

Die Tatsache, daß Code valide ist, bedeutet nur, daß er keine Syntaxfehler enthält, nicht aber, daß er auch das anzeigt, was man beabsichtigt hatte. :lol:

sosum

wobre
Hi,

hm, ich habe jetzt deinen Code eingefügt und kann keinen Unterschied feststellen. Hier:
Opera 7.54:
[Blockierte Grafik: http://jugendkultur.apolyton.de/gfx/ta_op.jpg]
in gross: http://jugendkultur.apolyton.de/gfx/ta_op.gif

Internet Explorer 6
[Blockierte Grafik: http://jugendkultur.apolyton.de/gfx/ta_ie6.jpg]
in gross: http://jugendkultur.apolyton.de/gfx/ta_ie6.gif

FireFox 1.0 :shock:
[Blockierte Grafik: http://jugendkultur.apolyton.de/gfx/ta_ff.jpg]
in gross: http://jugendkultur.apolyton.de/gfx/ta_ff.gif

#pfusch hat Textausrichtung: rechts
#analogie hat Textausrichtung: links
p hat Textausrichtung rechts

Da das P-Tag innerhalb des DIV ist, gilt auch "p", align:right. Deswegen überlappen sich die Bereiche. Ich finde das richtig, da obwohl eine ID-Selektor prinzipiell eine höhere CSS-Priorität hat, als ein Tag-Selektor, so ist dieser ein Kindelement dessen und müsste trotzdem gelten. So stehts auch im FF computed Style.

Jetzt wird interessant: ersetzte mal bitte den betroffenen Code:

Code

<div id=pfusch> 
        <p>liegt bei IE unter analogie (rechts)
        <p>Jugendberufschule 
        <p>Schulsozialarbeit 
        <p>Schulverweigerung 
        <h1>Kinder und Jugendhilfe</h1> 
</div> 


<div id=analogie> 
         <p>IE und Opera einig?  (links)
         <p>Jugendberufschule 
         <p>Schulsozialarbeit 
         <p>Schulverweigerung 
         <h1>Kinder und Jugendhilfe</h1> 
<div>

Alles anzeigen

Ich habe nur hingeschrieben, wie es definiert ist. Da ist doch seltsam, oder? :shock:
Okay, als nächstes entwirren wir ein bisschen und streichen bei dem P-Selektor das text-align. Dort steht also:

Code

p {	margin:0;padding:0;padding-right:4px;}

Und man sieht das, was ich beklage:
[Blockierte Grafik: http://jugendkultur.apolyton.de/gfx/ta_ff2.jpg]
in gross: http://jugendkultur.apolyton.de/gfx/ta_ff2.gif
Wo ist jetzt das "text-align:right" von #pfusch
Gertrud
Oh man, wie recht du hast. Desweiteren glaube ich auch nicht, dass der W3C Validierer CSS-Code überhaupt prüft. :lol:

Kann man eigentlich die Bilder hier in BB kleiner machen? (Ohne das ich das Bild selbst kleiner mache...)

sosum

sorry das ich meinen letzten beitrag noch editieren musste, aber das so gaaar nicht, wie es war.

wobre

Hi sosum,
hast du beim IE und Orpera nicht gesehen, das die beiden letzten DIV's aufeinander liegen. Untere Box - 1. Zeile.

Sag mal, wie oft soll der der sich immer wiederholende Text auftauchen? drei mal oder nur zweimal?
Und er soll wenn ich dich richtig versteh immer rechts ausgerichtet sein!
Mich interessiert das Thema sehr, denn trotz den Fehlern scheint hier etwas nicht zu passen.

wobre

Zitat von wobre

... das die beiden letzten DIV's aufeinander liegen. Untere Box - 1. Zeile.

Sorry: sehe grad eben, ich meine den Text der beiden letzten DIV's !

wobre

sosum
Vielleicht hilft dir dieser Code weiter:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Palais e.V. - Portal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


</script>
<style type="text/css">
body { margin:0px 0px 0px 0px;padding:0px 0px 0px 0px; }


/* Das Infomenü für jugendhilfe */
#jugendhilfe {
   position:absolute;top:20px;left:200px;height:100px;z-index1;background-color:#999999;


   text-align:right;
   border:1px solid red;
   font-family:arial; font-size:10px;
}


#pfusch {
   position:absolute;top:200px;left:200px;height:100px;z-index2;background-color:yellow;


   text-align:right;
   border:1px solid red;
   font-family:arial; font-size:10px;
}


#analogie {
   position:relative;top:200px;left:400px;width:160px;height:100px;z-index3;background-color:#008800;


   text-align:right;
   border:1px solid red;
   font-family:arial; font-size:10px;
}


h1 {
   margin:0px 0px 0px 0px ;padding:0px 0px 0px 0px;
   color:red;font-weight:normal;font-size:16px;
   border-top:1px solid red;
}


</style>
</head>
<body>
      <div id=jugendhilfe>
         Jugendhilfe<br>
         Jugendberufschule<br>
         Schulsozialarbeit<br>
         Schulverweigerung<br>
         <h1>Kinder und Jugendhilfe</h1>
      </div>


      <div id=pfusch>
         Pfusch<br>
         Jugendberufschule<br>
         Schulsozialarbeit<br>
         Schulverweigerung<br>
         <h1>Kinder und Jugendhilfe</h1>
      </div>


      <div id=analogie>
         Analogie<br>
         Jugendberufschule<br>
         Schulsozialarbeit<br>
         Schulverweigerung<br>
         <h1>Kinder und Jugendhilfe</h1>
      </div>
</body>
</html>

Alles anzeigen

Phobos

sosum:
Es gibt auch einen CSS-Validierer.

MartinH

Hallo,

erstmal den Code von Ballast befreit:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Palais e.V. - Portal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#pfusch {
   position:absolute;top:50px;left:100px;
 /*width:3px; /*debug entry*/
   text-align:right;
   border:1px solid green;
}
</style>
</head>


<body>
   <div style="position:absolute;top:0px;left:0px;border:1px solid red">
      Bloß ein bisschen Text
      <div id=pfusch>
         <p>Pfusch</p>
         <p>Schulsozialarbeit</p>
      </div>
   </div>
</body></html>

Alles anzeigen

Dann mit der Breite gespielt (die Bilder sind jeweils von links nach rechts: Internet Explorer, Opera, Firefox).
ohne width-Angabe:
[Blockierte Grafik: http://www.hallofreun.de/temp/IEohne.png] [Blockierte Grafik: http://www.hallofreun.de/temp/OPohne.png] [Blockierte Grafik: http://www.hallofreun.de/temp/FXohne.png]
IE macht bekanntlich divs gerne so breit, dass alles reinpasst. Opera macht ihm das nach. Fx nimmt ohne Breitenangabe anscheinend die Breite null, wobei links- oder rechtsbündig keinen Sinn mehr ergeben. Den rechten Rahmen malt er jedoch unter dem Rand der ersten div.

Mit width:3px
[Blockierte Grafik: http://www.hallofreun.de/temp/IE3px.png] [Blockierte Grafik: http://www.hallofreun.de/temp/OP3px.png] [Blockierte Grafik: http://www.hallofreun.de/temp/FX3px.png]
IE sieht bei 3px Breite auch nicht mehr rechtsbündig aus. Endlich ein Unterschied zwischen Opera und IE.

Mit width:150px
[Blockierte Grafik: http://www.hallofreun.de/temp/IE150px.png] [Blockierte Grafik: http://www.hallofreun.de/temp/OP150px.png] [Blockierte Grafik: http://www.hallofreun.de/temp/FX150px.png]
Jetzt ist für alles genug Platz.
Fazit: divs, vor allem absolute, soll man breit genug anlegen.
edit: Mittlerweile bin ich der Meinung, dass auch Fx ohne width-Angabe die div so breit machen sollte wie den Text.
edit2: In Bugzilla ist ein ganz ähnlicher Fehler gemeldet

Martin