zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Zeilenumbruch bei horizontal nebeneinanderliegenden divs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.07.2004, 12:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2003
Beiträge: 30
GrafZahl befindet sich auf einem aufstrebenden Ast
Standard Zeilenumbruch bei horizontal nebeneinanderliegenden divs

Hallo!
Ich habe einige div-Container mit float:left horizontal in einer Reihe liegen.
Ist es möglich, nach jedem x-ten div-Container eine Art Zeilenumbruch einzufügen?
Oder muß ich das ganze dann anders als mit float:left lösen?
Für'n kleinen Tip wär ich sehr dankbar!
Gruß, Graf Zahl
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.07.2004, 12:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Oder muß ich das ganze dann anders als mit float:left lösen?
[float: left;] bedeutet nun mal das alles was vom Platz her noch passt ge'floatet' wird.

Wenn ich Dich nun richtig verstanden habe - willst Du nur eine betimmte Anzahl Elemente 'floaten' lassen.

Möglichkeiten

1. Einen übergeordenten Container der die max. Breite bestimmt.

2. Einen [clear: left;] entsprechend einfügen

hier ein kompiniertes Beispiel, wobei die max. Breite des übergeordenten Containers vom BODY, mit entsprechender Fensterbreite - also variabel, darstellt wird.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="de">
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">	
<!--

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

div {
	float: left;
	width: 100px;
	margin: 5px;
	border: 1px solid #000000;
	padding: 2px 5px;	
	background-color: #FFFFFF;
	font-size: 0.8em;
}

br.clear {
	clear: both;
	line-height: 0em;
	height: 0px;
}
	-->
</style>

</head>
<body>

<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div><br class="clear" />
<div>[float: left;]</div><br class="clear" />
<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div>
<div>[float: left;]</div>

</body></html>
Ich hoffe es hilft Dir
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.07.2004, 13:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2003
Beiträge: 30
GrafZahl befindet sich auf einem aufstrebenden Ast
Standard

Hallo Ulle!
[clear: left;] <-- ist genau das, was ich gesucht habe.
Danke Dir ganz erzlich für Deine Tips!
Gruß, Graf Zahl
Mit Zitat antworten
  #4 (permalink)  
Alt 15.07.2004, 14:02
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Teste aber sehr, sehr sorgfältig! Außer in sehr guten Browsern (Opera und Safari) ist »clear« überall ziemlich kaputt.
Eine Übersicht findest du hier: http://www.pixelsurge.com/experiment/clearers.htm

Traurig eigentlich, das ist CSS 1...
Mit Zitat antworten
  #5 (permalink)  
Alt 16.07.2004, 13:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2003
Beiträge: 30
GrafZahl befindet sich auf einem aufstrebenden Ast
Standard

Alles klar, danke für den Hinweis, Toscho! Leider ist der Link tot, aber ich denke, ich finde das schon heraus!
Gruß, Graf
Mit Zitat antworten
  #6 (permalink)  
Alt 16.07.2004, 16:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Warum und wie ist clear kaputt, toscho?

Würde mich mal interessieren. Außer, dass bei bestimmten Konstellationen der IE dann gelegentlich nix mehr anzeigt (Peek-a-Boo oder Guillotine-Bug, s. hier: http://www.fabrice-pascal.de/bugbase/guillotine2/ ), hab ich sonst noch nix an Bug bemerkt (o.k. - der o.g. Bug ist schon recht heftig!).

Würde mich freuen, wenn Du das nochmal erklären könntest oder einen funktionierenden Link posten würdest.
Mit Zitat antworten
  #7 (permalink)  
Alt 16.07.2004, 16:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Ich habe diesen CODE aus diesem Link noch, könnte diesen posten

Bewertung von mir WICHTIG, erklären schwierig, sind einige Beispiele.

Verlinken kann/will ich nicht, hätte kein Onlinesystem zur Verfügung, aber wenn hemfrie zusagt, dann gibts hier 593 Zeilen zum kopieren.
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 16.07.2004, 16:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Sonst schicks mir per mail - ich stells dann online.
Mailaddi findest Du z.B. auf meiner HP.
Mit Zitat antworten
  #9 (permalink)  
Alt 16.07.2004, 16:51
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Zitat:
Zitat von ulle
aber wenn hemfrie zusagt, dann gibts hier 593 Zeilen zum kopieren.
wenns hilfreich ist, immer her damit
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.07.2004, 16:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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"> 
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">	
<!--

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

h3 {
	margin: 0;
	}
.container {
	margin: 20px 50px;
	background: #ccc;
/*	width: 700px; /* this helps IE */
/*	border-bottom: 1px solid blue; /* this will make all scenarios work in Gecko */
/*	padding: 10px; /* this will also make all scenarios work in Gecko */
	}
.float {
	float: left;
	width: 200px;
	height: 100px;
	margin: 0;
	background: #f00;
	}
.clearA {
	overflow: hidden; /* helps WinIE5 */
	clear:both;
	height:0;
	margin:0; /* I think this is unnecessary */
	font-size: 1px;
	line-height: 0; /* helps WinIE5.5 with A2 */
	}
.clearB {
	clear:both;
	height:0;
	margin:0; /* I think this is unnecessary */
	font-size: 1px; /* helps WinIE with B1 and B2 */
	line-height: 0; /* helps WinIE5 */
	}
.clearC {
	overflow: hidden; /* helps IE6, but is unnecessary if container has dimension */
	clear:both;
	height:1px; /* helps Gecko */
	margin:-1px 0 0 0;
	font-size: 1px;
	}
th {
	text-align: left;
	}
td {
	text-align: center;
	color: #fff;
	}
td.yes {
	background: green;
	}
td.no {
	background: red;
	}
td.partial {
	background: orange;
	}
	
-->
</style>
</head>

<body>
<h1>Clearing methods</h1>

<h2>A. Clearing element CSS for the following test cases:</h2>
<pre>.clearA {
	overflow: hidden;
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0;
	}

</pre>
<div class="container">
	<h3>1. Div with nothing inside</h3>
	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<div class="clearA"></div>
</div>
<div class="container">
	<h3>2. Div with nbsp inside</h3>
	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>

	<div class="clearA"></div>
</div>
<div class="container">
	<h3>3. Div with comment inside</h3>
	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<div class="clearA"></div>
</div>
<div class="container">
	<h3>4. br</h3>

	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<br class="clearA" />
</div>

<h2>B. Clearing element CSS for the following test cases:</h2>
<pre>.clearB {
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0;
	}
</pre>
<div class="container">
	<h3>1. Div with nothing inside</h3>
	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>

	<div class="clearB"></div>
</div>
<div class="container">
	<h3>2. Div with nbsp inside</h3>
	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<div class="clearB"></div>
</div>
<div class="container">
	<h3>3. Div with comment inside</h3>

	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<div class="clearB"></div>
</div>
<div class="container">
	<h3>4. br</h3>
	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<br class="clearB" />
</div>

<h2>C. Clearing element CSS for the following test cases:</h2>
<pre>.clearC {
	overflow: hidden;
	clear: both;
	height: 1px;
	margin: -1px 0 0 0;
	font-size: 1px;
	}</pre>
<div class="container">
	<h3>1. Div with nothing inside</h3>
	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<div class="clearC"></div>
</div>
<div class="container">
	<h3>2. Div with nbsp inside</h3>

	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<div class="clearC"></div>
</div>
<div class="container">
	<h3>3. Div with comment inside</h3>
	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<div class="clearC"></div>
</div>
<div class="container">

	<h3>4. br</h3>
	<div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div>
	<br class="clearC" />
</div>

<table border="1">
	<caption>
	Browser Results 
	</caption>
	<tr> 
		<th scope="col">Browser</th>

		<th scope="col">A1</th>
		<th scope="col">A2</th>
		<th scope="col">A3</th>
		<th scope="col">A4</th>
		<th scope="col">B1</th>
		<th scope="col">B2</th>

		<th scope="col">B3</th>
		<th scope="col">B4</th>
		<th scope="col">C1</th>
		<th scope="col">C2</th>
		<th scope="col">C3</th>
		<th scope="col">C4</th>

	</tr>
	<tr> 
		<th scope="row">Win IE 6</th>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="partial">P<sup>1</sup></td>

		<td class="partial">P<sup>2</sup></td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="partial">P<sup>1</sup></td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="partial">P<sup>3</sup></td>
	</tr>
	<tr> 
		<th scope="row">Win IE 5.5</th>
		<td class="partial">P<sup>2</sup></td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="partial">P<sup>1</sup></td>
		<td class="partial">P<sup>2</sup></td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="partial">P<sup>1</sup></td>
		<td class="partial">P<sup>3</sup></td>
		<td class="partial">P<sup>3</sup></td>
		<td class="partial">P<sup>3</sup></td>

		<td class="partial">P<sup>3</sup></td>
	</tr>
	<tr> 
		<th scope="row">Win IE 5.0</th>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="partial">P<sup>1</sup></td>
		<td class="partial">P<sup>2</sup></td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="partial">P<sup>1</sup></td>

		<td class="partial">P<sup>3</sup></td>
		<td class="partial">P<sup>3</sup></td>
		<td class="partial">P<sup>3</sup></td>
		<td class="partial">P<sup>3</sup></td>
	</tr>

	<tr> 
		<th scope="row">Win Moz/FF</th>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="yes">Y</td>
		<td class="no">N</td>

		<td class="partial">P<sup>6</sup></td>
		<td class="no">N</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
	</tr>
	<tr> 
		<th scope="row">Win NN 7.1</th>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="no">N</td>

		<td class="yes">Y</td>
		<td class="no">N</td>
		<td class="partial">P<sup>6</sup></td>
		<td class="no">N</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
	</tr>
	<tr> 
		<th scope="row">Win Opera 7.x</th>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
	</tr>

	<tr> 
		<th scope="row">Win Opera 6.0</th>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="partial">P<sup>4</sup></td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
	</tr>
	<tr> 
		<th scope="row">Mac IE</th>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
	</tr>
	<tr> 
		<th scope="row">Mac Moz/Camino</th>
		<td class="no">N</td>

		<td class="no">N</td>
		<td class="no">N</td>
		<td class="yes">Y</td>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="no">N</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
	</tr>

	<tr> 
		<th scope="row">Mac FF</th>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="yes">Y</td>
		<td class="no">N</td>

		<td class="no">N<sup>7</sup></td>
		<td class="no">N</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
	</tr>
	<tr> 
		<th scope="row">Mac NN 7.1</th>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="no">N</td>

		<td class="yes">Y</td>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
	</tr>
	<tr> 
		<th scope="row">Mac Opera 7.5</th>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
	</tr>

	<tr> 
		<th scope="row">Mac Opera 6.0</th>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="partial">P<sup>4</sup></td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
	</tr>
	<tr> 
		<th scope="row">Mac Safari</th>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="partial">P<sup>5</sup></td>

		<td class="partial">P<sup>5</sup></td>
		<td class="partial">P<sup>5</sup></td>
		<td class="yes">Y</td>
	</tr>
	<tr> 
		<th scope="row">Mac OmniWeb 5.0b</th>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="yes">Y</td>

		<td class="yes">Y</td>
		<td class="yes">Y</td>
		<td class="partial">P<sup>5</sup></td>
		<td class="partial">P<sup>5</sup></td>
		<td class="partial">P<sup>5</sup></td>

		<td class="yes">Y</td>
	</tr>
	<tr> 
		<th scope="row">Linux Moz 1.5</th>
		<td class="no">N</td>
		<td class="no">N</td>
		<td class="no">N</td>

		<td class="yes">Y</td>
		<td class="no">N</td>
		<td class="yes">Y</td>
		<td class="no">N</td>
		<td class="yes">Y</td>
		<td class="yes"></td>

		<td class="yes"></td>
		<td class="yes"></td>
		<td class="yes"></td>
	</tr>
</table>



Y = Yes, the gray container envelops the red float and there is no extra space 
	beneath the float. 

	N = No, the gray container does not envelop the red float.

	P = Partial, the gray container envelops the red float but leaves extra space 
	beneath it, or the container will only contain the float if the container 
	has certain characteristics (dimension, border, padding, etc.)</p>



<sup>1</sup> This will only work if the container has a dimension assigned</p>


<sup>2</sup> There is an extra 1 or 2 pixels of space below the float. line-height: 
	0 only fixes B2, not B1. Space not present in WinIE5.0 for A1 due to overflow: 
	hidden, but this doesn't work for WinIE5.5 for A1.</p>


<sup>3</sup> If the container does not have a dimension assigned, C1-3 will 
	show an extra 1 pixel of space below the float, and C4 will not work at all.</p>


<sup>4</sup> The container is 1 or 2 pixels too short (the float overlaps slightly).</p>


<sup>5</sup> There is an extra 1 pixel below the float.</p>



<sup>6</sup> This does not work in Win98, apparently due to font rendering 
	differences. </p>


<sup>7</sup> This is working at least since build 20040531, possibly before.</p>
<h2>Notes</h2>
<h3>Internet Explorer issues</h3>


Overflow: hidden seems only to benefit WinIE5.0, which needs it when using 
	a div with nothing in it, otherwise it shows a gap beneath the float. font-size: 
	0 does not fix this, and causes MacIE to &quot;leave a big space beneath the 
	float.&quot; Line-height: 0 gets rid of the gap only when the div has &amp;nbsp; 
	inside (or presumably other characters).</p>



IE is also very dependent on font-size: 1px. Without it, many of the tests 
	show extra space beneath the float.</p>
<h3>Gecko issues</h3>


Gecko seems to have a problem with empty divs, divs without height, and divs 
	where the content is super small (more explanation of what this means below).</p>
<h4>Super small content</h4>


B2 will work in Gecko on WinXP and Win2K, but not Win98. It also will not work 
	on Mac. This platform and OS dependency seems to be based on the font rendering 
	differences between the different OS's. Why do I say this? Because messing 
	with the font properties of B2 is what determines whether it will work or 
	not. If you remove the font-size declaration entirely, it works in all Geckos. 
	Increasing the font-size also makes it work. If you leave font-size: 1px in 
	there, you can also get it to work by changing the &amp;nbsp; to a character 
	that takes up more horizontal space, such as an X.</p>


Bruno Fassino created a page which shows the variation in clearing using different 
	characters. Which characters work varies by platform and font:

	http://www.brunildo.org/cgi-bin/gecko_clear0.pl 
</p>



The default font is Arial and the default size is 1px, but you can change it 
	to see how the clearing changes based on font properties:

	http://www.brunildo.org/cgi-bin/gecko_clear0.pl?family=Times+New+Roman&amp;size=2</p>


Possible solutions to fix B2 for MacGecko:</p>
<ul>
	[*]Remove font-size or set to 0 
		<ul>
			[*]fixes B2 for MacGecko
			[*]breaks B1 and B2 for WinIE 5.5, 6 (extra space)

			[*]breaks B1 for WinIE 5.0 (extra space)
			[*]breaks B2 for MacIE5.x (extra space)
			[*]doesn't hurt WinGecko, WinOpera
		[/list]	
	[*]Set font-size to 2px 
		<ul>
			[*]fixes B2 for MacGecko

			[*]breaks B1 for WinIE 5.0, 5.5, 6.0 (2 px extra space)
			[*]breaks B2 for MacIE5.x (extra space)
			[*]doesn't hurt WinGecko, WinOpera, Safari, MacOpera, OmniWeb
		[/list]	
	[*]Set line-height to 1px 
		<ul>
			[*]fixes B2 for MacGecko (conflicting reports - does not fix Moz1.4, 
				does fix which version?)

			[*]breaks B1 and B2 for Win IE 5.0, 5.5, 6.0
			[*]doesn't hurt WinGecko, WinOpera
		[/list]	[/list]

These tests need to be performed on Win98.</p>


Another strange item of note: MacFirefox seems to have been recently cured 
	of this buggy behavior. B2 was not working in Firefox 0.8 build 20040331, 
	but is working in build 20040531.</p>
<h4>Empty or zero height divs</h4>



Adding a border or padding to the container, or a border to the clear, makes 
	Gecko contain the floats in all examples. Evidently margin collapsing is going 
	on, but I don't know where or why. This appears to be a manifestation of these 
	bugs:

	http://bugzilla.mozilla.org/show_bug.cgi?id=209694

	http://bugzilla.mozilla.org/show_bug.cgi?id=224057</p>


The C tests were an attempt to solve this issue, because they assigned a height 
	of 1px, but unfortunately C does not work well cross-browser.</p>
<h3>Other variables that could possibly mess things up (not tested)</h3>
<ul>
	[*]Do gaps appear when you zoom text?
	[*]Content running next to the float
[/list]<h2>Testers</h2>
<ul>
	[*]Susanne Jaeger - Win98
	[*]Brain Ally - Linux, MacOSX
	[*]Kat Rasmussen - MacOSX (10.1.2), Mac9.2
	[*]Georg - Win2Kpro
	[*]Bruno Fassino - Win2K, MacOSX

	[*]Roger Johansson - MacOSX (10.3.4)
	[*]Donna Casey - WinXP, MacOSX (10.3.4)
	[*]Roger Roelofs - MacOSX (10.3.4)[/list]</body>
</html>
Der Nummer habe ich noch XHTML1.0 verpasst.......
__________________
</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
Div's beim Scrollen horizontal verschieben insider Javascript & Ajax 2 22.06.2014 15:48
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 11:23
mehrere Bilder innerhalb eines divs horizontal mittig platzieren a-i-r CSS 2 09.12.2009 15:24
Divs horizontal anordnen, mit <li>, float? funky^mariechen CSS 12 29.08.2008 03:08
Problem: 3 Div's horizontal positionieren Krieju CSS 2 07.05.2004 18:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:32 Uhr.