Firefox und float bei verschachtelten DIVs ->Bockmist
steffen
- css
hallo!
bin sehr verzweifelt; hatte dasselbe problem schonmal, letztes mal konnte ich es umgehen diesesmal nicht:
ich habe ein markup wie folgt:
<div class="drumrum">
<div class="inhalt">
<p>bla blabla</p>
</div>
</div>
mein css sieht so aus:
.drumrum {
background-color : red;
width:600px;
height : 100%;
}
.inhalt {
width:300px;
background-color : #eee;
float:left;
clear : right;
}
der inhalt soll unbedingt floaten, denn rechts soll ja noch eine navigation hin.
alle browser außer dem firefox erweitern den roten kasten bis unten hin; der FF stellt ihn einfach nicht mehr dar. warum? was kann ich tun?
wer auch staunen will, kann sich das phänomen mal hier anschauen:
http://www.8ung.at/63762/temp/css/
würde mich über hilfe sehr freuen!
Hallo Steffen,
es liegt am Dokumententyp,
mit <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
sieht's so aus wie du es willst.
Gruß von Aybee
mit <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
sieht's so aus wie du es willst.
hallo und danke erstmal! tatsächlich ist der rahmen jetzt länger, aber mit den 100% nur so lang, wie mein Bildschirmfenster nach unten reicht. alles, was in diesem DIV steht und nach unten über den Bildschirmrand geht, hat schon wieder keinen roten hintergrund:( - kann man schön testen, indem man das bildschirmfenster klein zieht und dann runterscrollt.
außerdem frage ich mich, ob's das doch auch als XHTML gibt. mit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
kam ich jedenfalls nicht sehr weit.
Hi,
hallo und danke erstmal! tatsächlich ist der rahmen jetzt länger,
Im Quirks mode interpretiert auch der Firefox height falsch (so wie der IE ...)
aber mit den 100% nur so lang, wie mein Bildschirmfenster nach unten reicht.
Das ist nunmal die Bedeutung von height:100%.
außerdem frage ich mich, ob's das doch auch als XHTML gibt. mit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
kam ich jedenfalls nicht sehr weit.
Befasse Dich mit den Themen Doctypeswitch und quirks mode
cu,
Andreas
Hi,
.drumrum {
background-color : red;
width:600px;
height : 100%;
Das bezieht sich auf die Höhe des Elternelements.
Sollte dieses keine Höhenangabe haben (also height:auto gelten), gilt für .drumrum ebenfalls height:auto;
Also wird .drumrum so hoch wie nötig.
}
.inhalt {
width:300px;
background-color : #eee;
float:left;
Hiermit nimmst Du .inhalt aus .drumrum raus, .inhalt darf die Höhe von .drumrum nicht mehr beeinflussen.
clear : right;
}
alle browser außer dem firefox erweitern den roten kasten bis unten hin; der FF stellt ihn einfach nicht mehr dar. warum? was kann ich tun?
Der Firefox verhält sich eben so, wie height und float definiert sind.
Vermutlich reicht es für Deine Zwecke, im .drumrum ein Element mit clear:both einzusetzen - nach den floatenden Elementen.
cu,
Andreas
Hallo!
.drumrum {
height : 100%;
Das bezieht sich auf die Höhe des Elternelements.
Sollte dieses keine Höhenangabe haben (also height:auto gelten)
würde es dann etwas bringen, wenn ich "body {height:100%;}" definiere? oder ist das falsch gedacht?
Der Firefox verhält sich eben so, wie height und float definiert sind.
schade eigentlich...;)
Vermutlich reicht es für Deine Zwecke, im .drumrum ein Element mit clear:both einzusetzen - nach den floatenden Elementen.
habe ich ausprobiert, geht aber leider nicht. noch eine idee? vielen dank jedenfalls schon mal für Deine hinweise!
Hi,
würde es dann etwas bringen, wenn ich "body {height:100%;}" definiere? oder ist das falsch gedacht?
Für body gilt das gleiche: prozentuale Höhenwerte beziehen sich aufs Elternelement.
Vermutlich reicht es für Deine Zwecke, im .drumrum ein Element mit clear:both einzusetzen - nach den floatenden Elementen.
habe ich ausprobiert, geht aber leider nicht. noch eine idee? vielen dank jedenfalls schon mal für Deine hinweise!
Dann hast Du vermutlich was falsches probiert. Aber da Du ja Deine Problemseite nicht verlinkt hast, kann keiner außer Dir das überprüfen.
cu,
Andreas
hallo werte helfer!
habe es mit etwas herumtricksen doch noch geschaft, der tipp von andreas war der auslöser für die lösung, bei der ich noch ein weiteres links floatendes element mit eingeschaftelt habe, was funtioniert, wei man im link unten bewundern kann.
Dann hast Du vermutlich was falsches probiert. Aber da Du ja Deine Problemseite nicht verlinkt hast, kann keiner außer Dir das überprüfen.
doch, hab ich, allerdings weiter oben im thread...
http://www.8ung.at/63762/temp/css/
vielen dank nochmal; ich hoffe, ich werde dueses problem nun nicht mehr haben...
gruß
steffen