Firefox - clear:both - <br/> oder <div>

ulle · #1 (**permalink**) 23.09.2004, 13:16

Hallo,

evtl. hatte ja mal jemand ein ähnliches Problem mit [clear: both;] innerhalb eines BR-Tag im Firefox.

Code:

<br class="clear" />

Code:

.clear {
	clear: both;
	line-height: 0;
	font-size: 0;
	height: 0;
}

Ich kann den Firefox nicht davon überzeugen den BR-Tag ohne sichtbare Zeilenhöhe, also [line-height: 0], darzustellen, d.h. die Zeile die der BR-Tag erzeugt bleibt normal hoch, trotz der Klassendefinition.
Dies passiert aber nur wenn der #main-Container höher ist als der #beside-Container [float:right;]. Umgekehrt funktioniert es so wie es in der Klasse .clear vorgesehen ist.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css">    
/*<![CDATA[*/ 

html,body   { 
   margin: 0; 
   padding: 3px 0 0 0; 
   background-color: #FFCC33; 
   color: #000000; 
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
   font-size: 100.01%; 
} 

.ie-float-bug {
	/*width: 100%;*/ /* wichtig IE-FLOAT-BUG */
	background-color: #AAAAAA;
}
.clear {
	clear: both;
	line-height: 0;
	font-size: 0;
	height: 0;
}

#beside { 
   float:right; 
   width: 22em; 
   background-color: #0088FF; 
} 

#main { 
   margin-right: 22em; 
   background-color: #FF6611; 
} 

div.box {
	margin: 0 5px 5px 5px;
	border: 1px solid #000000;
	padding: 3px;
	color: #663300;
	background-color: #FFEECC;
	font-size: 0.8em;
}

/*]]>*/ 
</style> 


</head><body> 

<div class="box">Dies ist eine Inhalt-Box
(zweite Zeile)</div> 

<div class="ie-float-bug">   


	<div id="beside"> 

		<div class="box" style="padding-bottom: 100px;"> 
			Dies ist eine Inhalt-Box
padding-bottom: [variable]; (test)
		</div> 

		<div class="ie-float-bug" style="background-color: #666666;"> 
			<div class="box">
				Dies ist eine Inhalt-Box

				innerhalb=>> class="ie-float-bug"

				(evtl. fuer neue Float kompination)
			</div> 
		</div> 

		<div class="box">
			Dies ist eine Inhalt-Box
		</div> 

	</div> 
		


	<div id="main"> 
	
		<div class="box">
			Dies ist eine Inhalt-Box
(zweite Zeile)
		</div> 
		
		<div class="box" style="padding-bottom: 300px;"> 
			Dies ist eine Inhalt-Box
padding-bottom: 300px;
		</div>
		 
	</div>
	
	 
	<br class="clear" /> 
	 
</div>    

<div class="box">Dies ist eine Inhalt-Box</div> 

</body></html>

dieses Layout ist auch für diesen THREAD geeignet

http://www.xhtmlforum.de/viewtopic.php?p=10016#10016

ulle · #2 (**permalink**) 23.09.2004, 21:45

Na sowas

Ich habe nun den BR-Tag durch einen DIV ersetzt, nun geht es zwar im Firefox und IE6.

Code:

	
	<div class="clear"></div>

Aber sobald nun der #beside-Container höher als der #main-Container ist ...

habe ich im IE6 nun einen unerklärlichen Abstand.

beeviz · #3 (**permalink**) 23.09.2004, 22:58

zur verständnis: was meinst du mit "br ohne zeilenhöhe"?

mit einem br umbrichst du doch nur zur nächsten zeile.
wenn du nicht umbrechen willst dann einfach

Code:

white-space: nowrap

oder wie hab ich das zu verstehen?

ulle · #4 (**permalink**) 24.09.2004, 09:13

Zitat:

was meinst du mit "br ohne zeilenhöhe"?

Habe mich wohl unglücklich ausgedrückt

Ich möchte eine Zeilenumbruch, ohne sichtbare Zeilenhöhe.

Hier wird das Problem mit FLOAT auch beschrieben:

http://www.complexspiral.com/publica...aining-floats/

#5 (**permalink**) 24.09.2004, 10:35

Verstehe nicht ganz was du meinst?

Habe jetzt auch nicht die Zeit und Lust mich durch diese englische Seite zu lesen. Erklärs mal bitte kurz auf Deutsch.

ulle · #6 (**permalink**) 24.09.2004, 11:00

Wie wird ein FLOAT beendet, wie immer mit CLEAR

Zu diesem Zweck nutze ich den

Code:

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

Damit dieser Zeilenumbruch aber nicht sichtbar im Layout ist habe ich eine Klasse geschrieben (zu sehen in der erste Code-Einlage im THREAD), die aber im beschiebenen Fall nicht funktioniert.

Einfach mal das Codebeispiel kopieren und im Firefox/Mozilla mal anzeigen lassen.

Zitat:

Zitat von HotSpot

Habe jetzt auch nicht die Zeit und Lust mich durch diese englische Seite zu lesen. Erklärs mal bitte kurz auf Deutsch.

Um das Problem zu verstehen benötigst Du kein Englisch, es ist auf der ersten Grafik im LINK zu sehen.
Trotzdem Danke für Deine Bemühungen.

hemfrie · #7 (**permalink**) 24.09.2004, 11:18

Das seltsame ist, dass es mit 1px funktioniert

Code:

.clear {
   clear: both;
   line-height: 1px;
   font-size: 1px;
   height: 1px;
}

Ich denke mal, Du kannst mit diesem Pixel nicht leben, oder

hemfrie

ulle · #8 (**permalink**) 24.09.2004, 11:30

Mit welchem Mozilla hast Du das getestet ?

Und meinst Du jetzt mit
oder mit <div>, weil mit Firefox 0.9.x geht es auch mit 1px nicht, und im IE bleibt auch der Abstand wenn der <div> eingesetzt wird und der #beside-Container höher ist.

hemfrie · #9 (**permalink**) 24.09.2004, 11:43

Code:

 <div class="clear"></div>

Habe es jetzt nicht mit Deinem Beispiel getestet. Ich verwende diese Methode aber selbst schon seit längerer Zeit und es bleibt dabei nur 1px Abstand. Auch beim FF 0.9+

Ich verwende zur Zeit den FF 1.0 PR

hemfrie

ulle · #10 (**permalink**) 24.09.2004, 11:47

Code:

Ich verwende diese Methode aber selbst schon seit längerer Zeit und es bleibt dabei nur 1px Abstand. Auch beim FF 0.9+

Mit dem DIV geht es ja auch im Firefox perfekt, dabei entsteht ja nur im IE dieser merkwürdige Abstand.

Zumal ein DIV für diesen Zweck wohl semantisch nicht ideal ist

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
Synchroner XMLHttpRequest und Firefox reagiert nicht mehr	kristian	Javascript & Ajax	3	05.08.2008 16:10
Probleme mit clear:both im Firefox 2	mannimedia	CSS	6	29.11.2006 11:32
<div> 100% auch im Firefox und Co.	cssler	CSS	9	06.01.2006 12:31
Firefox 1.5 Beta 1	Pablo	Offtopic	19	13.09.2005 18:56
<p> tag in <div> zerstört layout in firefox :(	ichwaergern	CSS	2	29.11.2004 13:23