|
|||
![]()
Hallo zusammen,
wieso entsteht beim IE eine Abstand zwischen Menü und Content, Firefox & Opera dagegen machen alles richtig? Ich glaube, es liegt am floating, bin mir aber nicht sicher... Ich finde einfach den Fehler nicht, es liegt nicht an fehlenden "padding:0"... Danke Bertram |
Sponsored Links |
|
|||
![]() Zitat:
danke für den Link. Aber entweder ich habe den Hack nicht richtig implementiert oder es ist nicht der 3-Pixel-Jog. Code:
/* Hide from IE5-mac. Only IE-win sees this. \*/ * html #content { height: 1%; margin-left: 0; } /* End hide from IE5/mac */ http://www.positioniseverything.net/...html#haslayout Code:
* html #content {height: 1%;} /* for IE/Win */ *>html #content {height: auto;} /* for IE5/Mac */ Danke Bertram |
|
|||
![]()
Ich hab das auch schon mal probiert. Das hilft nur für diese Textverschiebung, die den Text dann immer weiter nach links schiebt und so einen unschönen Treppeneffekt hinterläßt.
Die eigentliche Lücke entsteht aber schon beim Container an sich. Und dagegen hilft die Angabe der Höhe irgendwie nicht. Am besten positionierst Du beide Container floatend, dann legen sie sich aneinander. |
|
|||
![]()
Hallo Thomas,
ich hab mal eine ganz simple Testseite gebastelt. Extra im Quirksmode! ![]() Was macht man da? -> dagegen hab ich noch nix gefunden außer beide Container floaten lassen. Hier der Code (wollte es auch hochladen, aber das klappte grad nicht.....): Zitat:
|
|
|||
![]()
Schaut Euch mal diesen CODE im IE an. Ich glaube nicht das dies der 3 Pixel-Bug ist.
Beachte im 2. Beispiel habe ich margin-left auf Null gesetzt, trotzdem der Abstand. 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: 0; background-color: #FF9933; color: #000000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 100.01%; } .left { float:left; width:180px; background-color:red; height:20px; } #zweiter { margin-left:180px; margin-right:200px; background-color:blue; height:90px; } #zweiter2 { margin-left:180px; margin-right:200px; background-color:blue; height:90px; } div.ie-float-bug { width: 100%; /*ie-float-bug*/ margin: 0; border: none; padding: 0; background-color: #FFFFFF; } * html #zweiter2 { margin-left: 0; } .clear { clear: both; line-height: 0px; font-size: 0px; height: 0px; } /*]]>*/ </style> </head><body> <div class="ie-float-bug"> <div class="left"> </div> <div id="zweiter"> </div> </div> <br class="clear" /> <div class="ie-float-bug"> <div class="left"> </div> <div id="zweiter2"> Ich habe im IE margin-left: 0; </div> </div> <br class="clear" /> </body></html>
__________________
</ulle> |
|
|||
![]() Zitat:
Probier mal folgendes aus: Schieb mal das Browserfenster soweit zu, bis er zweite Container runterhüpft - im unteren Beispiel ist er dann ganz links -> klar. Im oberen Beispiel ist dann der 3-pixel-Abstand weg und die Box schließt direkt an die andere an (halt darunter). Genau das gleiche passiert ja mit dem Text, der schiebt sich dann um 3 pixel nach links. Mach noch mal folgendes: gib keine Höhe an im ersten Beispiel und schreib statt dessen Text rein! Dann passiert dies: Die blaue Box ist dann linksanliegend - nur der Text hat den 3px-jog - wenn das Menü zuende ist, rutscht dann eben der Text in der bekannten Manier nach links. Wenn die Boxen verschiedene Farben oder Bilder haben und anliegen sollen dann funktioniert der Holly-Hack nicht. Der klappt nur, wenn die 3 pixel ansich eh nicht auffallen und man nur diese Textverschiebung beheben will. |
|
||||
![]()
Es ist doch der 3-Pixel-Sprung! So funktioniert's:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <title>IE-Floatbug</title><style type="text/css"> #left { float: left; width: 180px; background: red; height: 300px; } #zweiter { margin-left: 180px; margin-right: 200px; background: blue; height: 500px; } * html #left { /* \*/ margin-right: -3px; /* */ } * html #zweiter { /* \*/ margin-left: 177px; /* */ }</style> <div id="left"> </div> <div id="zweiter"> </div> Was für ein Gewurstel wegen drei Pixeln! Gruß Thomas |
Sponsored Links |
|
|||
![]() Zitat:
![]() 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: 0; background-color: #FFCC33; color: #000000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 100.01%; } #left { float:left; width:180px; background-color: #FF0000; height:20px; } #zweiter { margin-left: 20px; /* ACHTUNG */ margin-right:300px; background-color: #2299FF; /* height:200px; */ } * html #left { margin-right: -3px; } * html #zweiter { margin-left: 17px; } /*]]>*/ </style> </head><body> <div id="left"> </div> <div id="zweiter">Der kurzeitige Besitzerwechsel der Domain ebay.de könnte eine Klagewelle von Verkäufern zur Folge haben, die in dieser Zeit Waren unter Wert verkaufen mussten, weil die Auktionsplattform nicht erreichbar war. </div> </body></html> ![]() ![]() Problem entsteht im IE wenn der 2. Container ein Höhe erhält ![]()
__________________
</ulle> |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
spezielles CSS floating Problem | towerlexa | CSS | 7 | 06.03.2013 07:52 |
Grundsatzdiskussion: Floating Layouts | renet | CSS | 3 | 13.12.2012 16:24 |
Wiedermal floating | mcdaniels | CSS | 7 | 16.05.2011 20:08 |
floating überlappt sich | Luke_Skyscraper | CSS | 7 | 14.09.2006 07:05 |
floating Problematik bei verschachtelten div's | bensen | CSS | 2 | 29.05.2005 16:36 |