PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Firefox Darstellungsfehler?

DanMan
2008-08-30, 16:14:56
Guckt euch das mal im Firefox (3) an: http://freenet-homepage.de/danman/test/test_padding.html

Wieso um alles in der Welt ändert sich die Höhe der Box, wenn man die Breite des Fensters ändert?
darph
2008-08-30, 22:22:27
WebKit zeigt das gleiche Verhalten. Es liegt zumindest nicht am Fux.
MarcWessels
2008-08-31, 02:45:38
Beim IE tritt der Fehler in anderer Form in Erscheinung: Beim Verbreitern des Fensters ändert sich an der Höhe der Box nichts, schaltet man aber zwischen Fenster und Vollbild um, isses mal ein Qiadrat und mal ein Rechteck.
Malabolge
2008-08-31, 11:31:28
Möglicherweise lieg ich falsch aber :
Könnte es daran liegen das das Script keinen /DIV erzeugt und dadurch einen "leeren" Text ?

Quelltext:
alles.height = window.innerHeight;
$('test').set('text', this.height); // Texthöhe !?

erzeugt wird :
<body>
<div id="test" style="padding: 20% 0pt; height: 80%;"/> // Kein </div> - Es dürfte also eine "Leerzeile" mit texthöhe this.heght erzeugt werden
// siehe : -->"80%;"/<--


</body>



einfach mal Nachprüfen
DanMan
2008-08-31, 14:32:48
WebKit zeigt das gleiche Verhalten. Es liegt zumindest nicht am Fux.
Beim IE tritt der Fehler in anderer Form in Erscheinung: Beim Verbreitern des Fensters ändert sich an der Höhe der Box nichts, schaltet man aber zwischen Fenster und Vollbild um, isses mal ein Qiadrat und mal ein Rechteck.
Hmm. Hab gerade gemerkt: In Opera ändert sich die Höhe auch - wenn man die Fensterbreite ändert, und dann die Seite neu läd...
Möglicherweise lieg ich falsch aber :
Könnte es daran liegen das das Script keinen /DIV erzeugt und dadurch einen "leeren" Text ?

Quelltext:
alles.height = window.innerHeight;
$('test').set('text', this.height); // Texthöhe !?

erzeugt wird :
<body>
<div id="test" style="padding: 20% 0pt; height: 80%;"/> // Kein </div> - Es dürfte also eine "Leerzeile" mit texthöhe this.heght erzeugt werden
// siehe : -->"80%;"/<--

</body>

einfach mal Nachprüfen
In Firebug ( ;) ) sieht es so aus, ja. Aber im original Quelltext steht das <div> ja schon komplett drin. Bedeutet wohl nur, dass das <div> im DOM inhaltsleer ist.

Aber das muss doch ein Bug sein, weil:

es die Höhe ändert, wenn ich die Breite des Fensters ändere
es das im Ff (und im Safari) sogar live macht - ohne irgendeinen onResize update Event oder so meinerseits
der <body> 100% Höhe hat, und das <div> 60% mit 20% Padding oben und unten = 100% haben müsste


Warum ist dem nicht so? Irgendwas läuft da doch falsch. Ich verstehe es nicht...
darph
2008-08-31, 16:24:23
Meines Wissens ist es nicht vorgesehen, ein Objekt als inhaltsleer kennzeichnen zu dürfen, nur weil gerade nichts drin steht. Ich glaube, das geht nur bei Objekten, die von sich aus und immer inhaltsleer sind (img, hr). Aber das nur am Rande.


Ja, also wenn man die Funktion etwas aufräumt und mit den Prozentangaben spielt: Die Prozentangabe bezieht sich nicht auf die Höhe des Elternelements, sondern auf die Breite. Wenn du 50% einträgst, ist dein roter Kasten immer genau so hoch, wie dein Fenster breit (plus die Textzeile).

Bug in MooTools, würd ich sagen.

huh?

Danman, probiere mal bitte, ob das bei diesem Code auch auftritt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Unbenanntes Dokument</title>
<style type="text/css">
div {width:500px;background:red;}
#test {padding: 50% 0;}
</style>
</head>

<body>
<div id="test">b</div>
</body>
</html>
darph
2008-08-31, 17:06:14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Unbenanntes Dokument</title>
<style type="text/css">
div {border: 1px solid black;}
#test {padding-top: 45%;
padding-bottom: 50%;
}
#a {
height: 500px;
width: 200px;
}
</style>
</head>

<body>
<div id="a">
<div id="test">b</div>
</div>
</body>
</html>
Spiel mal mit dem width-Attribut von #a. Du wirst sehen, daß der Kasten um #test immer weitgehend quadratisch ist.

Hier liegt tatsächlich ein Fehler in der Art und Weise vor, in der das padding angewendet wird. Hier wird bei Prozentangaben immer die Höhe des Elternelementes ausgelesen.

Du kannst also beruhigt sein, es liegt nicht an deinem Script. :)

http://www.w3schools.com/css/pr_padding-top.asp

Possible Values

Value Description
length Defines a fixed top padding. Default value is 0
% Defines a top padding in % of the height of the closest element. This value does not work like expected in all browser
DanMan
2008-08-31, 22:17:50
http://freenet-homepage.de/danman/test/darph_padding.html

Ja, offenbar in allen Browsern falsch - oder zumindest unerwartet. So viel zur Standardkonformität. :(

Sollte vllt. mal 'nen Bug Report aufgeben.... ist nur immer so eine umständliche Prozedur... Ma' gucken.

Auf jeden Fall mal danke für die Mit-Analyse und 2. Meinung. :)

P.S.: Auf der Seite, wo das vorkommt hab ich es übrigens so umgangen, dass ich noch ein Wrapper-<div> mit height:100% um das Element mit dem Padding gelegt hab. Dann hats für meine Zwecke hingehauen.