XHTMLforum - Einzelnen Beitrag anzeigen - Firefox - clear:both

ulle · #1 (**permalink**) 23.09.2004, 14: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