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:
<!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>
