|
|||
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. |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
||||
Zitat:
Zitat:
__________________
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.) |
|
|||
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&pId=124&tab=firstLevel&go=down&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&pId=135&tab=firstLevel&go=up&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&pId=135&tab=firstLevel&go=down&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&pId=112&tab=firstLevel&go=up&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&pId=112&tab=firstLevel&go=down&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&tab=secondLevel&parentPageId=112">Site 3</a></span> </li><li> <span class="upArrow"> <a href="https://devadmin.erails.net/index.php?page=sort&pId=134&tab=firstLevel&go=up&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&pId=134&tab=firstLevel&go=down&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&pId=136&tab=firstLevel&go=up&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 --> |
|
|||
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. |
|
||||
Zitat:
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. 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.) |
|
||||
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.) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |