nicht angemeldet
Ausrichtung von Text über padding-left / padding-left
Hallo Alle.
Mein Problem / meine Frage betrifft die Ausrichtung von Text über padding innerhalb eines Containers, der mittels Javascript dynamisch zentriert wird.
//
//
Ausgangssituation:
//
//
Der Container "ebene01"
#ebene01
{
position:absolute;
width:294px;
height:210px;
background-color:tan;
clip:rect(0px,294px,210px,0px);
visibility:hidden;
z-index:0;
}
wird mittels Javascript-Funktion
function positioniere_ebene(name,left,top,status)
{
ebene = document.getElementById(name);
ebene.style.left = document.body.clientWidth/2-ebene.offsetWidth/2+left;
ebene.style.top = document.body.clientHeight/2-ebene.offsetHeight/2+top;
ebene.style.visibility = status;
}
bei "onload" der Seite
<body onload="positioniere_ebene('ebene01',0,0,'visible')">
<div id="ebene01" class="texteigenschaften">Text</div>
horizontal und vertikal zentriert dargestellt.
Der Container "ebene01" enthält einen Text, der über eine Klasse
.texteigenschaften
{
text-decoration:none;
font-family:arial,sans-serif;
font-style:normal;
font-weight:normal;
font-size:11px;
letter-spacing:0px;
line-height:14px;
color:#ffffff;
}
formatiert und über
padding-left:30px;
padding-top:15px;
innerhalb des Containers 30px von links und 15px von oben eingerückt werden soll.
//
//
Problem und Frage:
//
//
Firefox 0.8 rückt DEN CONTAINER auf der Seite um 30px nach links und 15px nach unten, NICHT DEN TEXT .....
Internet Explorer macht es richtig (?) und rückt den Text wie gewünscht ein, der Container selbst bleibt exakt horizontal und vertikal zentriert.
Die Anweisungen
padding-left:30px;
padding-top:15px;
habe ich probeweise sowohl in "#ebene01" als auch in ".texteigenschaften" untergebracht .... immer mit dem gleichen Ergebnis.
Erst mit dem Konstrukt
<div id="ebene01">
<div id="text" class="texteigenschaften">Text</div>
</div>
wird in beiden Browsern das selbe und wie gewünscht dargestellt; ich denke aber, dass diese Lösung nur eine Krücke ist, die einen Denk- oder Programmierfehler kaschiert .....
Weiss jemand, woran es liegen könnte ?
Mit freundlichen Grüßen
Koe
-
Hi,
der mittels Javascript dynamisch zentriert wird.
warum denn dies?
Firefox 0.8 rückt DEN CONTAINER auf der Seite um 30px nach links und 15px nach unten, NICHT DEN TEXT .....
Nachdem ich mich durch Deinen Code gewurschtelt und festgestellt habe, was das JavaScript eigentlich macht: Du bist dem hinlänglich bekannten Box-Model-Bug des IE aufgesessen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi cheatah,
Du bist dem hinlänglich bekannten Box-Model-Bug des IE aufgesessen.
Ich nehme an, es geht um den "doctype switch" - der betreffende Artikel hier in Selfhtml ist doch reichlich komplex, und ich bezweifle stark, dass der Box-Model-Bug hinlänglich bekannt ist.
Mfg Koe
-
Hi,
Du bist dem hinlänglich bekannten Box-Model-Bug des IE aufgesessen.
Ich nehme an, es geht um den "doctype switch"auch. Mit einem hinreichend günstigen DOCTYPE kannst Du für den IE 6.0 den Quirks-Mode verlassen, so dass der Box-Model-Bug _in diesem Browser_ nicht mehr gilt. Bei (noch) älteren IEs hat das keine Wirkung.
der betreffende Artikel hier in Selfhtml ist doch reichlich komplex, und ich bezweifle stark, dass der Box-Model-Bug hinlänglich bekannt ist.
Doch, das möchte ich schon meinen. Such mal im Netz nach dem Thema.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
Hi,
ebene.style.left = document.body.clientWidth/2-ebene.offsetWidth/2+left;
document.body.clientWidth/2-ebene.offsetWidth/2+left
ist eine Zahl.
Die Eigenschaft left erwartet als Wert aber nicht eine Zahl, sondern eine Länge (also Zahl plus Einheit).
Fehlerhafte Werte MÜSSEN ignoriert werden.
Es wird also der initial value verwendet, der ist auto (was im Normalfall auf 0 rausläuft)ebene.style.top = document.body.clientHeight/2-ebene.offsetHeight/2+top;
dito.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi Andreas,
ebene.style.left = document.body.clientWidth/2-ebene.offsetWidth/2+left;
Die Eigenschaft left erwartet als Wert aber nicht eine Zahl, sondern eine Länge (also Zahl plus Einheit).
Fehlerhafte Werte MÜSSEN ignoriert werden.
Es wird also der initial value verwendet, der ist auto (was im Normalfall auf 0 rausläuft)Herzlichen Dank für den Tip ...
merkwürdig ist halt, dass die Ausrichtung einer Fläche OHNE TEXT mit dem oben erwähnten Script auch in Firefox gut und zuverlässig funktioniert, was bei der von Dir erwähnten Regel eigentlich nicht passieren dürfte ...
wie passt das zusammen ... ?
Wäre es so formal korrekt, wenn ich die Einheit so anhänge ?
ebene.style.left = document.body.clientWidth/2-ebene.offsetWidth/2+left+"px";
Mfg Koe
-
Hi Andreas,
merkwürdig ist halt, dass die Ausrichtung einer Fläche OHNE TEXT mit dem oben erwähnten Script auch in Firefox gut und zuverlässig funktioniert, was bei der von Dir erwähnten Regel eigentlich nicht passieren dürfte ...
:-(
Das muss ich leider zurücknehmen !
Alle meine archivierten Scripte zur Ausrichtung von Ebenen laufen bisher lokal ohne Doctype bzw. in der Doctype-Variante "transitional". Ebenen werden hier in allen Browsern korrekt ausgerichtet !
Bei Anwendung der Doctype-Variante "strict" werden Ebenen in Firefox nicht mehr korrekt ausgerichtet ! (Bzw. korrekt, aber nicht wie gewünscht ausgerichtet :-/ )
Bei der schreibweise
ebene.style.left = document.body.clientWidth/2-ebene.offsetWidth/2+left+"px";
wird eine Ebene in Firefox zwar wieder horizontal mittig zentriert, bei
ebene.style.top = document.body.clientHeight/2-ebene.offsetHeight/2+top+"px";
funktioniert das aber nicht ...........
Jetzt brauche ich wirklich einen guten Rat von einem Fachmann, ich bin mit meinem Latein wirklich am Ende ...
Mfg Koe
-
-