Hi Moni,
Du bist also der Meinung, dass Optimierung für IE6 übertrieben
ist?
Das habe ich nicht gesagt. Ich finde es schlimm, durchdachte Standards für eine fehlerhafte Software (=IE, auch neue Versionen und Urgesteine) so hinzubiegen, dass diese sie versteht. Beim IE6 ist es aufgrund des unverschämten Verbreitungsgrades ein notwendiges Übel, wenn man dies geschäftlich macht. Alles vor IE6 ist vernachlässigbar… deshalb würde ich immer noch zur CSS-Lösung raten.
Wir sind eine Webeagentur und möchten es dem Kunden
natürlich Recht machen. Ich kenne mich leider mit diesem Thema
nicht so gut aus, da ich einen Mac habe und deshalb sowieso
eine uralte Version des IE.
Der IE Mac wird nicht mehr weiterentwickelt und ist auf uraltem Stand stehen geblieben. Zum Testen ist der IE Mac völlig ungeeignet. Du musstsolltest neben standardkonformen Browsern (Opera 9+, Camino Mac, und den weitgehend konformen Firefox 2+, optional auch Safari) die Albträume der Webdesigner IE6 und IE7 PC in Betracht ziehen - und Du kannst auf PC auch beide zugleich nutzen - zuerst auf IE7 updaten und dann IE6 Standalone http://browsers.evolt.org/download.php?/ie/32bit/sta… in einen Ordner entpacken und starten.
Die Idee mit dem „Stetcher“ hatte ich auch. Aber leider
funktioniert es nicht. Obwohl alle drei Elemente, also der
„drumrum“-div, der Text-div und der „Stretch“-div eine
relativ-position haben. Sobald ich einem der Elemente ein
float gebe, wird dass „drumrum“-div nicht mehr von seinen
inneren divs ausgedehnt…
Das Container-DIV darf nicht von floatenden Elementen ausgedehnt werden, außer es folgt ein clearendes Element. Der IE6 hat einen Bug, sodass er den Container ohne clearendes Element nach dem Inhalt ausdehnt, wenn man dem Container eine fixe Breite gibt. Siehe http://www.wer-weiss-was.de/cgi-bin/forum/showarchiv…
Vielleicht weißt du woran das liegt?
Ohne den Gesamtkontext zu kennen kann ich nur raten… es fehlt das clearende Element? Ich kann Dir ein Beispiel machen:
Min-Height Workaround
* { margin:0; padding:0 }
body { text-align:center; background:#fafafa; }
div#all { width:950px; margin:0 auto; border:1px solid;}
p { font-size:16px; padding-bottom:1em; }
div.container { background:#3DD5FF; margin:20px; }
div.stretch { width:1px; height:150px; float:left; margin-left:-1px;}
div.container-footer { clear:left; }
Lorem ipsum …
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent arcu ante,
ornare in, tristique eu, porta quis, erat. Quisque nulla massa, elementum eu,
bibendum id, bibendum eget, purus. Integer non ipsum. Cras sollicitudin faucibus
nulla. Donec lectus nibh, hendrerit nec, ultrices nec, porttitor ultricies, leo.
Morbi placerat, dui eu auctor lobortis, mi sapien consequat ligula, sit amet
porttitor massa dolor fringilla justo. Etiam risus ante, tempor in, lacinia
nec, venenatis non, mi. Morbi varius turpis quis felis. Nam interdum vehicula
nulla. Mauris semper enim convallis elit. Quisque feugiat pharetra libero. Ut mi
nisl, adipiscing ut, pulvinar nec, ullamcorper eu, mauris. Vestibulum consequat
purus ut risus. In hac habitasse platea dictumst. Integer aliquam, dui vitae
fringilla tristique, erat dolor ullamcorper odio, eget blandit pede nisl vitae
erat. Suspendisse tellus sem, varius vitae, bibendum facilisis, cursus quis, eros.
Donec pretium mi eu elit. Duis at enim. Sed nulla.
Die Container-Elemente sind immer mindestens 100px hoch, weil div.stretch vor dem Inhalt links floatet und 100px hoch ist - dem Inhalt (=Text) folgt der div.container-footer, welcher mit clear:left den Container über alle links floatenden Elemente aufspannt (zwingt also folgende Elemente unterhalb der links floatenden Elemente). Mit einem negativen margin-left von der Größe der Breite von div.stretch gibt es auch keine unschöne Verschiebung des Inhalts 1px nach rechts.
Bye
Rudy
