Probleme mit clear:both im Firefox 2

mannimedia · #1 (**permalink**) 28.11.2006, 17:43

Hallo zusammen,

ich habe folgendes Problem und weiß wirklich nicht mehr weiter.

Es geht darum dass der Firefox das clear:both in der Styleangabe seltsam interpriert. Das nächste seltsame ist, dass er den Fehler nur in meiner Printversion macht.

Wenn ich das ganze so schreibe macht er alles richtig.

HTML-Code:

PHP-Code:


			
<div>

Inhalt mit float:left

</div>

<div style="clear:both;"></div>

<div>

Inhalt mit float:left

</div>

Wenn ich es aber so schreibe, wendet er das clear:both nicht an.

HTML-Code:

PHP-Code:


			
<div>

Inhalt mit float:left

</div>

<div style="clear:both;">

Inhalt mit float:left

</div>

Kann doch eigentlich nicht sein oder. Hab leider eh das Gefühl dass der Firefox 2 noch sehr buggy ist

Hat jmd. schonmal das Problem gehabt?

Gruß
Manni

fricca · #2 (**permalink**) 28.11.2006, 18:10

Poste bitte eine vollständigen Code, der das Problem nachvollziehbar macht -- oder/und einen Link.
Siehe auch: http://xhtmlforum.de/40079-fuer-frag...twortende.html

mannimedia · #3 (**permalink**) 28.11.2006, 18:37

Klar. Sorry. Man muss natürlich mehr sehen um das Problem zu verstehen. Habe mal ne Testdatei erstellt und habe dabei festgestellt, dass es nicht nur in der Druckversion einen Fehler gibt sondern auch in der normalen Ansicht. Und außerdem funzt es auch im Firefox 1.5 nicht (gut wenn man noch nen Rechner hat wo der drauf läuft

).

So hier also der HTML-Code bei dem alles richtig funktioniert;

PHP-Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
.floatLeft {
    float:left;
}
.container {
    clear:both;
    margin-top: 30px;
}
</style>
</head>

<body>
<div class="container">
    <div class="floatLeft" style="width:200px;height:200px;background:red;border: 1px solid #000;">Lorem ipsum</div>
    <div class="floatLeft" style="width:200px;height:200px;background:blue;border: 1px solid #000;">Lorem ipsum</div>
</div>
<div style="clear:both;"></div>
<div class="container">
    <div class="floatLeft" style="width:200px;height:200px;background:red;border: 1px solid #000;">Lorem ipsum</div>
    <div class="floatLeft" style="width:200px;height:200px;background:blue;border: 1px solid #000;">Lorem ipsum</div>
</div>

</body>
</html>

und hier der Code wo es nicht funktioniert:

PHP-Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
.floatLeft {
    float:left;
}
.container {
    clear:both;
    margin-top: 30px;
}
</style>
</head>

<body>
<div class="container">
    <div class="floatLeft" style="width:200px;height:200px;background:red;border: 1px solid #000;">Lorem ipsum</div>
    <div class="floatLeft" style="width:200px;height:200px;background:blue;border: 1px solid #000;">Lorem ipsum</div>
</div>
<div class="container">
    <div class="floatLeft" style="width:200px;height:200px;background:red;border: 1px solid #000;">Lorem ipsum</div>
    <div class="floatLeft" style="width:200px;height:200px;background:blue;border: 1px solid #000;">Lorem ipsum</div>
</div>

</body>
</html>

Ich verstehe einfach nicht warum das clear:both in der container-klasse das float:left nicht richtig aufhebt und deshalb den margin-top nicht anwendet.

Danke schonmal für jede Hilfe.

LG
Manni

fricca · #4 (**permalink**) 28.11.2006, 19:16

Die Darstellung ist schon korrekt.
Bei Elementen mit clear-Eigenschaft "verschwindet" der obere margin im Bereich der davorliegenden floats.
Visual formatting model | clear property

mannimedia · #5 (**permalink**) 29.11.2006, 10:31

Hallo,

ah ok. Danke für die Antwort. Wobei ich sagen muss, dass ich das ehrlich gesagt nicht unbedingt logisch finde. Aus diesem Grund muss ich ja ein Element mehr einfügen das nix macht außer den float zu clearen.

Thx und Grüße
Manni

fricca · #6 (**permalink**) 29.11.2006, 11:46

Zitat:

Zitat von mannimedia

Aus diesem Grund muss ich ja ein Element mehr einfügen das nix macht außer den float zu clearen.

Nein, musst du nicht.
Wenn du #container auch floatest, wird der margin berücksichtigt (siehe der letzte Abschnitt des Links).

mannimedia · #7 (**permalink**) 29.11.2006, 12:32

Jetzt gehts!!

Super. Vielen Dank!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme mit Firefox und der Positionierung	psq	CSS	1	16.03.2007 11:37
(Newbie): Probleme mit Abständen - IE6 + Firefox	NullDevice	CSS	6	15.07.2006 21:22
probleme mit div - background-image im firefox	dasjo	CSS	5	05.01.2006 13:43
CSS-Seitenlayout: Probleme mit Firefox	Rethel	CSS	2	13.10.2005 14:10
css, height: 100%, border, firefox und andere Probleme	cynocephalus	CSS	4	13.08.2005 18:25