• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Position: Float, Clear Both und offsetHeight BUG

S

Splitt3r

New member
Hallo,

ich muss zwangsweise den offsetHeight-Wert eines Div´s ermitteln. Ansich ist das ja kein Problem. Doch bei einer positionierung von float:left; gibt es extreme Unterschiede zwischen (F)irefox und (I)nternet (E)xplorer

Hier ist der Code:

HTML: 
<html>
	<head>
	</head>
	<body>

		<div id="listing">

			<div style="float:left;height:100px;width:200px;background:black;"></div>
			<div style="float:left;height:50px;width:100px;background:red;"></div>
			<div style="clear:both;">

		</div>


		<div style="height:20px;width:20px;">


		<script language="javascript">
		alert(document.getElementById('listing').offsetHeight);
		</script>

	</body>
</html>

Diese Variante enthält das clear:both; Div nach den beiden Divs mit der Positionierung float:left;

Was an diesem Code als offsetHeight Wert korrekt wäre, wären die 100pixel.

Firefox: offsetHeight:120px (100px inkl. des 20px divs welches nicht innerhalb von listing ist?)
Internet Explorer: offsetHeight:135px (sogar nochmal imaginäre 15px drauf?)

Nehmen wir nun das clear:both raus so kommt folgendes zustande:

Internet Explorer: offsetHeight:100px (korrekt)
Firefox: offsetHeight: 0px (falsch)

Ich freue mich über Hilfe

Viele Grüße
 
Der Doctype ist folgender:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML: 
	<style>
	*{padding:0px;margin:0px;}
	</style>

Ein Problem, und zwar die irrtümlichen 15 Pixel werden nun nicht mehr drauf gerechnet, aber es wird weiterhin das Div welches sich unterhalb des Divs "listing" befindet wird mit einer höhe von 20 pixel draufgerechnet. offsetHeight ergibt demnach überall 120 pixel was aber 100 pixel sein müssten.
 
Also ich bin jetzt ein kleines Stück weiter gekommen, der Firefox und der IE8 geben mit folgendem Code korrekterweise 100 Pixel aus:


Der IE7 Jedoch rechnet zu den 100 Pixeln noch die 20 Pixel des Divs darunter zu:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    </head>
    <body>

        <div id="listing">

            <div style="float:left;height:100px;width:200px;background:black;"></div>
            <div style="float:left;height:50px;width:100px;background:red;"></div>
            <div style="clear:left;"></div>

        </div>


        <div style="height:20px;width:20px;"></div>


        <script language="javascript">
        alert(document.getElementById('listing').offsetHeight);
        </script>

    </body>
</html>

Habt ihr dafür eine Lösung?

Viele Grüße
 
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    </head>
    <body>

        <div id="listing">

            <div style="float:left;height:100px;width:200px;background:black;"></div>
            <div style="float:left;height:50px;width:100px;background:red;"></div>
            <div style="clear:left; height: 0px;"></div>

        </div>


        <div style="height:20px;width:20px;"></div>


        <script language="javascript">
        alert(document.getElementById('listing').offsetHeight);
        </script>

    </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben