siehe
http://www.bilderhoster.at/files/BCssH87WG5GT.gif
so wie es firefox macht ist es richtig.
die frage ist nur … wie bringe ich den IE dazu es genauso zu machen?
Hallo,
http://www.bilderhoster.at/files/BCssH87WG5GT.gif
so wie es firefox macht ist es richtig.
die frage ist nur … wie bringe ich den IE dazu es genauso zu
machen?
Das ist einer der schlimmsten IE-Bugs. Wenn Du mit IE arbeitest würde ich zu allererst immer einen strikten HTML-Doctype oder XHTML verwenden, denn dann schaltet IE in den „Standards-Compliant Mode“ (in Verbindung mit IE ist der Name ein Witz) und zeigt … na ja, einiges besser an.
http://msdn2.microsoft.com/en-us/library/ms535242.aspx
So, das eigentliche Problem und die Lösung siehst Du, wenn Du den Code unterhalb verwendest. Der von Dir beschriebene Effekt tritt dann auf, wenn Du dem Container-Div (div#inner, das die floats enthält) eine fixe Breite gibst. Die Lösung ist ein umschließendes Div (im Beispiel div#outer) mit der Breite und keine eingestellte Breite für den Container (div#inner). Versuch ruhig mal div#inner eine Breite von 750px zu geben, dann schlägt der Bug zu.
Wenn Du Links im Text des Containers verwendest wirst Du mit dieser Kombination dann wahrscheinlich Bekanntschaft mit dem Guillotine-Bug machen, dessen einfachste Lösung ein clearendes Div nach dem Container ist (im Beispiel habe ich das schon eingebaut), der die Floats enthält. Der Guillotine-Bug schneidet manchmal bei Links mit hover im Teil des Containers, der nicht floatet, das herausstehende Element eiskalt ab.
http://positioniseverything.net/explorer/guillotine…
\<!--
div#outer { width: 750px; }
div#inner { background: lime; }
div#one { background: yellow; float: left; height: 200px; width: 300px; }
div#two { background: blue; float: right; height: 600px; width: 200px; }
--\>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam convallis, risus in ornare pretium, justo felis gravida dolor,
quis vulputate purus ligula eget nulla. Suspendisse risus. In at leo
a nisl rutrum sollicitudin. Sed ipsum tortor, tincidunt in, porttitor
eget, auctor sed, metus. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam convallis, risus in ornare pretium, justo felis gravida dolor,
quis vulputate purus ligula eget nulla. Suspendisse risus. In at leo
a nisl rutrum sollicitudin. Sed ipsum tortor, tincidunt in, porttitor
eget, auctor sed, metus. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam convallis, risus in ornare pretium, justo felis gravida dolor,
quis vulputate purus ligula eget nulla. Suspendisse risus. In at leo
a nisl rutrum sollicitudin. Sed ipsum tortor, tincidunt in, porttitor
eget, auctor sed, metus. Suspendisse potenti.
Schönen Gruß
Rudy