zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Firefox - clear:both - <br/> oder <div>

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.09.2004, 13:16
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard Firefox - clear:both - <br/> oder <div>

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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.09.2004, 21:45
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.09.2004, 22:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.06.2004
Beiträge: 172
beeviz befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 24.09.2004, 09:13
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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/
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 24.09.2004, 10:35
Anonymous
Gast
 
Beiträge: n/a
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.09.2004, 11:00
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #7 (permalink)  
Alt 24.09.2004, 11:18
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.776
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 24.09.2004, 11:30
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 24.09.2004, 11:43
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.776
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.09.2004, 11:47
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:15 Uhr.