zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ungewöhnlicher abstand beim clearen von floats

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.09.2009, 11:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2007
Beiträge: 18
adrianno befindet sich auf einem aufstrebenden Ast
Standard Ungewöhnlicher abstand beim clearen von floats

Hallo Leute,
ich habe folgendes Problem:

Die angehänge grafik zeigt zwei boxen, die in einer umschließenden box liegen. Die linke Box (Main page - level 1) ist auf float:left gestellt. Die rechte hat ein margin-left.

Problem: Wenn der float nicht gecleart wird wächst die äussere box natürlich nicht mit. Wenn ich aber hinter die beiden boxen ein <hr /> tag setze und dem die eigenschaft clear: both gebe, dann dehnt sich die box ungewöhlich weit aus. Nirgends ist ein margin oder padding eingestellt. Die größen der box in firebug ist auch ganz normal. kA wo der abstand herkommt.
Angehängte Grafiken
Dateityp: jpg 1.jpg (92,0 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.09.2009, 12:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Hatte das Problem auch schon mal.
Ich hatte ein Platzhalter div dazwischen bzw dahintergesetzt. der dieses dann blockiert. Es hat auch überall wunderbar funktioniert.

P.S. gebe dem float für den IE ein display:inline;
denn der IE rechnte bei float:left z.B. 3px hinzu.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.09.2009, 12:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von adrianno Beitrag anzeigen
Wenn der float nicht gecleart wird wächst die äussere box natürlich nicht mit. Wenn ich aber hinter die beiden boxen ein <hr /> tag setze und dem die eigenschaft clear: both gebe, dann dehnt sich die box ungewöhlich weit aus.
Poste am besten den Code. Hast Du [FAQ]FAQ[/FAQ] "CSS-Prolog" beachtet? (default-Abstände zurücksetzen)

Zitat:
Zitat von nils_1309 Beitrag anzeigen
gebe dem float für den IE ein display:inline;
denn der IE rechnte bei float:left z.B. 3px hinzu.
Achtung, nicht verwechseln: display: inline; behebt den Doubled-Float-Margin-Bug, der 3px-Bug dagegen betrifft Non-Floats, die neben einem Float stehen, und bedarf einer ganz anderen Abhilfe (alles nur IE < 7).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.09.2009, 12:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2007
Beiträge: 18
adrianno befindet sich auf einem aufstrebenden Ast
Standard

Hier mal der Code...Genügt das HTML um das Problem erkennen zu können?

HTML-Code:
<div id="innerGrey">
			<div id="sortPageBox">
			
<h3>Main page - level 1</h3>
<ul>

	<li>
			<span class="downArrow first">
			<a href="https://devadmin.erails.net/index.php?page=sort&amp;pId=124&amp;tab=firstLevel&amp;go=down&amp;sort=1">
			<img src="https://devadmin.erails.net/images/layout/arrowDown.gif">
			</a>
		</span>
			<span class="page">Site 0</span>
		</li><li>

			<span class="upArrow">
			<a href="https://devadmin.erails.net/index.php?page=sort&amp;pId=135&amp;tab=firstLevel&amp;go=up&amp;sort=3">
			<img src="https://devadmin.erails.net/images/layout/arrowUp.gif"></a>
		</span>
		<span class="downArrow">
			<a href="https://devadmin.erails.net/index.php?page=sort&amp;pId=135&amp;tab=firstLevel&amp;go=down&amp;sort=3">
			<img src="https://devadmin.erails.net/images/layout/arrowDown.gif">
			</a>
		</span>

			<span class="page">Site 2</span>
		</li><li>
			<span class="upArrow">
			<a href="https://devadmin.erails.net/index.php?page=sort&amp;pId=112&amp;tab=firstLevel&amp;go=up&amp;sort=7">
			<img src="https://devadmin.erails.net/images/layout/arrowUp.gif"></a>
		</span>
		<span class="downArrow">
			<a href="https://devadmin.erails.net/index.php?page=sort&amp;pId=112&amp;tab=firstLevel&amp;go=down&amp;sort=7">

			<img src="https://devadmin.erails.net/images/layout/arrowDown.gif">
			</a>
		</span>
			<span class="page"><a href="https://devadmin.erails.net/index.php?page=sort&amp;tab=secondLevel&amp;parentPageId=112">Site 3</a></span>
		</li><li>
			<span class="upArrow">
			<a href="https://devadmin.erails.net/index.php?page=sort&amp;pId=134&amp;tab=firstLevel&amp;go=up&amp;sort=7">
			<img src="https://devadmin.erails.net/images/layout/arrowUp.gif"></a>

		</span>
		<span class="downArrow">
			<a href="https://devadmin.erails.net/index.php?page=sort&amp;pId=134&amp;tab=firstLevel&amp;go=down&amp;sort=7">
			<img src="https://devadmin.erails.net/images/layout/arrowDown.gif">
			</a>
		</span>
			<span class="page">Site 1</span>
		</li><li>

			<span class="upArrow">
			<a href="https://devadmin.erails.net/index.php?page=sort&amp;pId=136&amp;tab=firstLevel&amp;go=up&amp;sort=9">
			<img src="https://devadmin.erails.net/images/layout/arrowUp.gif"></a>
		</span>
			<span class="page">Site 4</span>
	</li></ul>

</div><!-- end sortPageBox-->

<div id="sortSubpageBox">

<h3>Sub-page - level 2</h3>
</div><!-- end sortSubpageBox-->
<hr>
</div><!-- end innerGrey -->
Mit Zitat antworten
  #5 (permalink)  
Alt 16.09.2009, 12:40
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Abgesehen davon, dass das CSS fehlt, wäre am besten wäre ein Link auf ein Testcase (zumal Du auch Grafiken verwendest).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #6 (permalink)  
Alt 16.09.2009, 12:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2007
Beiträge: 18
adrianno befindet sich auf einem aufstrebenden Ast
Standard

Das ganze ist leider auf einem internen Server, auf den man von aussen nicht zugreifen kann.

@nils: an welcher stelle und wie genau hast du den platzhalter eingebaut?
Mit Zitat antworten
  #7 (permalink)  
Alt 16.09.2009, 13:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Also ich denke mal das alle beiden boxen eine feste Breite haben.
Detze um diese beiden Boxen einen div.

den als float:left; mir fester breite.
die beiden darin setzt du auch auf jeweils float:left; und gibste denen auch eine feste breite.

neben dem einen (der die beiden enthält) setzt du wieder einen div mit fester breite und höhe sowie float:left; und in diesen div setzt du das <hr />

gebe allen divs einen border mit verschiedenen farben. um zu sehen um du nicht schon vorher einen fehler hast...

Du kannst auch probieren um das <hr /> den div wegzulassen. ist aber nicht optimal.


@heiko ja, hast recht aber ich glaube selbst der IE 7 macht diesen Fehler noch.
Mit Zitat antworten
  #8 (permalink)  
Alt 16.09.2009, 13:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von adrianno Beitrag anzeigen
Das ganze ist leider auf einem internen Server, auf den man von aussen nicht zugreifen kann.
Dann poste wenigstens einen vollständigen Code mit CSS im style-Element (abgesehen davon, dass Du ja wohl noch frei zugänglichen Webspace zur Verfügung hast, auf den Du hochladen kannst).

Ein clear-Element steht i.d.R. unmittelbar vor dem schließenden tag des Elementes, das seine enthaltenen Floats einschließen soll. Ein leeres div o.ä. ist dafür aber nie nötig (siehe auch FAQ 2). Deine hr war schon eine gute Idee (sie kann bei Bedarf sogar unsichtbar gemacht werden), nur ohne kompletten Code lässt sich der Grund für die großen Abstände nicht ermitteln.

Zitat:
Zitat von nils_1309 Beitrag anzeigen
ich glaube selbst der IE 7 macht diesen Fehler noch.
Nein (beide Fehler sind im IE 7 behoben.)
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 16.09.2009, 13:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2007
Beiträge: 18
adrianno befindet sich auf einem aufstrebenden Ast
Standard

Hab mal versucht alles in ein zip zu packen
Angehängte Dateien
Dateityp: zip site.zip (14,2 KB, 0x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.09.2009, 13:53
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dann poste lieber den Code
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
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
Anfängerfrage zum Thema clearen im ie6 blond CSS 0 13.04.2010 06:47
Floats verschwinden im nichts, Fließer überdecken Floats. nick CSS 5 09.02.2008 15:34
Linksbündiges Image clearen ohne clear? akb CSS 1 09.04.2007 10:44
2 floats - will nur eines davon clearen elBoB CSS 14 09.08.2006 09:57
Wachsender Rahmen um floats möglich? [erledigt] Tex CSS 3 19.03.2006 13:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:08 Uhr.