nicht angemeldet
Firefox-Darstellung verschachtelter DIVs
Gunnar BittersmannHallo, hab ein Problem mit dem Fox.
Ich habe einen DIV, der einen zweiten DIV sowie einen umfließenden Textabsatz enthält. Der äußere DIV hat einen Rahmen. Der Quellcode lautet - aufs Wesentliche gekürzt:
---SNIP---
<html><head>
<style>
.container {
width: 610px;
padding: 5px;
border: 1px solid #000000;
}
.content {
width: 225px;
text-align: right;
float: right;
display: inline;
background-color: #DDDDDD;
}
</style>
</head><body>
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body></html>
---SNAP---
Der Internet Explorer tut genau das, was ich mir wünschen würde: Da der innere DIV höher ist als der äußere, wird der äußere gedehnt und rundrum der Rahmen gezogen.
Warum tut der Fox das nicht? Da wird der Rahmen um den Absatz gezogen, und der innere DIV ragt einfach über den Rahmen hinaus. Obwohl der äußere DIV, wenn ich's mir mit der WebDeveloper-Extension anzeigen lasse, genauso hoch ist wie der innere. Warum also benimmt sich der Rahmen so (komisch)?
Vielen Dank für eure Hilfe.
Hanjo.
-
hi,
Der Internet Explorer tut genau das, was ich mir wünschen würde:
Siehste, so'n Mist macht der Mal wieder - reagiert auf "Wünsche", anstatt sich an Standards zu halten.
Da der innere DIV höher ist als der äußere, wird der äußere gedehnt und rundrum der Rahmen gezogen.
Warum tut der Fox das nicht?Weil du mittels float das innere Element aus dem Fluss genommen hast.
Abhilfen: Äusseres Element ebenfalls Floaten, oder clearendes Element nach dem gefloateten einsetzen, oder overlflow nutzen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hello out there!
Der Quellcode lautet - aufs Wesentliche gekürzt:
<html><head>
<style>DOCTYPE, 'title'-Element und 'type'-Attribut beim 'style'-Element gehören zum Wesentlichen!
.content {
float: right;Damit nimmst du die Elemente dieser Klasse* aus dem Fluss. Damit haben sie keinen Einfluss auf die Höhe der Boxen ihrer Eltenelemente.
display: inline;
Diese Angabe ist wirkungslos, da durch 'float' eine Block-Box erzeugt wird.
Der Internet Explorer tut genau das, was ich mir wünschen würde
Er tut das Falsche.
Obwohl der äußere DIV, wenn ich's mir mit der WebDeveloper-Extension anzeigen lasse, genauso hoch ist wie der innere.
Wovon sprichst du? Von der Developer Toolbar des IE? Der DOM Inspector der Firefox bestätigt deine Angabe nicht.
Warum also benimmt sich der Rahmen so (komisch)?
Works as designed. Abhilfe könnte ein 'float' auch für die äußere Box schaffen.
See ya up the road,
Gunnar* Bist du sicher, dass Klassifizierung angebracht ist; nicht die Vergabe von IDs?
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)