div 100% breite IE und andere
ecklvo
- css
Hallo zusammen!
Tut mir leid, dass ich euch mit solch einem Problem stören muss, doch die langwierige Suche im Archiv hat mich zu keinem befriedigenden Ergebnis gebracht und daher versuch' ich es wieder einmal direkt an der Quelle, auch und gerade weil es schon so spät ist ;):
Ich habe ein Container-Div mit Breite 100%, darin sind weitere 10 Divs mit jeweils 10% und float:left. Mozilla (FB 0.7) versteht es, Opera (7.11) beinahe (er lässt Abstand zum Rand rechts) und Internet Explorer (6) bricht die Divs beim Zusammenschieben des Fensters um, was ich nicht so beabsichtigt habe.
<style type="text/css">
/*html, body { margin:0; width:100%; }*/ das lasse ich lieber weg, sonst breitet mir Opera das zwar bis zum Rand aus, macht aber auch eine vertikale Scrollbar ?
img { width:75px; height:85px; }
</style>
<body>
<div style="width:100%; height:300px; overflow:hidden;">
<div style="float:left; width:10%; height:105px; text-align:center;"><img src="blabla.png" alt="" /></div>
<div style="float:left; width:10%; height:105px; text-align:center;"><img src="blabla.png" alt="" /></div>
.....
</div>
</body>
Alles in standards-compliance-mode.
Bitte um Hilfe und gute Nacht!
Hallo,
Ich habe ein Container-Div mit Breite 100%, darin sind weitere 10 Divs mit jeweils 10% und float:left. Mozilla (FB 0.7) versteht es, Opera (7.11) beinahe (er lässt Abstand zum Rand rechts) und Internet Explorer (6) bricht die Divs beim Zusammenschieben des Fensters um, was ich nicht so beabsichtigt habe.
vielleicht ist das eigentliche Problem das Fehlen einer min-width Angabe für den IE, mir ist aber nicht ganz klar
geworden welche Anforderungen zugleich erfüllt werden sollen. Als Ersatz von min-width sind beim IE die
'expression' möglich, grundsätzlich rate ich aber eher ab, eine Tabelle könnte hier besser geeignet sein.
Informationen zu min-width und expression z.B. hier: http://www.lipfert-malik.de/webdesign/tutorial/css.html#max-width
und http://www.lipfert-malik.de/webdesign/tutorial/css.html#IEexpressionDHTML, bei deinem Code könnte es so ausschauen:
#ad {width:expression(
parseInt(document.body.clientWidth) >760 ? "100%" :"770");
}
body > #ad {width:100%; min-width:770px}
div div {overflow:visible;min-width:75px}
Dabei ist hier #ad die id für den aeusseren Div. Aber wie schon angedeutet, bei deinem Beispielcode und Text
mit Firebird 0.7 konnte ich deine Beschreibung nicht ganz nachvollziehen, und expression sind letztendlich eine
gelegentlich instabile DHTML-Lösung. Bei einer Reihung wäre vmtl. die Tabelle auch semantisch möglich und
würde wahrscheinlich für den IE die geforderte Flexibilität bringen.
Grüsse
Cyx23
vielleicht ist das eigentliche Problem das Fehlen einer min-width Angabe für den IE, mir ist aber nicht ganz klar
geworden welche Anforderungen zugleich erfüllt werden sollen. Als Ersatz von min-width sind beim IE die
'expression' möglich, grundsätzlich rate ich aber eher ab, eine Tabelle könnte hier besser geeignet sein.
Vielleicht sollte ich in diesem Fall über meinen Schatten springen und eine Tabelle einsetzen.
Hmm, das habe ich auch sogleich getan, doch dann ist die Sache, dass ich nicht wie beim Einsatz der Divs, sich eines unter das andere schiebt (bei den Geckos, beim IE bricht er dann einfach um), sondern dass ich ab der gewissen Breite aller 10 Bilder eine vertikale Scrollbar habe, was auch nicht gewünscht ist.
Danke für die Links und Deine Hilfe, e.
Hallo,
Vielleicht sollte ich in diesem Fall über meinen Schatten springen und eine Tabelle einsetzen.
ist ja oft gar nicht falsch.
Hmm, das habe ich auch sogleich getan, doch dann ist die Sache, dass ich nicht wie beim Einsatz der Divs, sich eines unter das andere schiebt (bei den Geckos, beim IE bricht er dann einfach um), sondern dass ich ab der gewissen Breite aller 10 Bilder eine vertikale Scrollbar habe, was auch nicht gewünscht ist.
Da ist mir trotz Beschreibung und deinem geposteten Code immer noch nicht ganz klar was alles wichtig ist, vielleicht hast du ein Beispiel mit URI welches z.B. bei Mozilla alles wie gewünscht darstellt?
Grüsse
Cyx23