|
|||
overflow:hidden im IE nicht korrekt dargestellt
Hallo Leute,
ich habe ein Problem mit der overflow:hidden Eigenschaft für ein Div-Element ohne feste Breite. Wenn in dem Div ein Bild ist, sollte es ja abgeschnitten werden, wenn das Div kleiner ist als das Bild. Im Firefox und Opera wird das Bild korrekt abgeschnitten, im IE bleibt das Div jedoch immer mindestens so groß wie das Bild. Hat jemand einen Tip, wie man da abschneiden auch im IE erzwingen kann? Anbei eine veränderte Beispieldatei von Selfhtml: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>overflow</title> </head><body> <div style="overflow:hidden; border:1px solid #840; margin:1em;"> abgeschnittener Hund: <code>hidden</code><br> <img src="hund.gif" width="208" height="181" alt="Hund"> </div> </body> </html> Robert |
Sponsored Links |
|
|||
Ergänzung: Der IE7 Beta2 scheint das Bild korrekt abzuschneiden. Es macht also nur der IE6 SP2 die Probleme und evtl. frühere Versionen. Die getestete Firefox-Version ist 1.5.0.4 und die Opera-Version ist 8.51
|
Sponsored Links |
|
|||
Beim IE<7 benötigt ein Element haslayout, um overflow anwenden zu können. Beim IE7 erzeugt overflow selbst haslayout=true.
Properties, die haslayout auf true setzen. (Ich sollte mal ne andere Platte auflegen) |
|
|||
@iChao,
kannst Du das bitte etwas genauer erklären? Ich hab nämlich das selbe Problem: Vereinfachtes Bsp: Code:
<div style="width:300px;height:200px;overflow:hidden;border:1px solid #F00;"> <div style="width:900px;position:relative;top:0px;left:0px;border:1px solid #000;"> <div style="width:300px;padding-top:100px;padding-bottom:100px;float:left;background-color:#EEE;"></div> <div style="width:300px;padding-top:100px;padding-bottom:100px;float:left;background-color:#CCC;"></div> <div style="width:300px;padding-top:100px;padding-bottom:100px;float:left;background-color:#AFE;"></div> <br style="font-size:1px;clear:both;" /> </div> </div> |
|
|||
Ich kann gerade meinen PC nicht anwerfen, um es im IE6 zu testen (zu warm, zu laut, kein Geld für einen neuen Lüfter)
Dein Code sieht aus, als würde der Inhalt ausbrechen, obwohl der äußere div
Es funktioniert trotzdem nicht, weil der innere Container von 900px Breite zusätzlich noch position:relative hat. Hier irrt der IE total, sieh mal Test E, IE6. Da gibt es keine Lösung, denn position:relative zusammen mit haslayout bricht selbst aus einem overflow:container noch aus. Leider sieht dieser Fall im IE7 nicht so aus, als würde IE7 den Standards folgen, kein Kommentar. Somit unterscheiden sich eure Probleme: einmal kommt overflow nicht zum Einsatz, ein anderes mal hat es keinen Effekt. Geändert von IChao (19.06.2006 um 13:52 Uhr) |
|
|||
Ich kann es nicht testen. Würde es denn für dieses Beispiel von dir, wenn position:relative mal testweise herausgenommen würde, funktionieren? Mag ja sein, dass ich Unsinn erzähle.
|
|
|||
Ja, es funktioniert dann, aber eben diese Angabe ist ebenso wichtig wie die Width-Angabe.
Mit Quirks: http://www.build.more-style.de/scrol...er-quirks.html Ohne Quirks: http://www.build.more-style.de/scrol...ne-quirks.html |
|
|||
Die width-Angabe brauchst du auf jeden Fall, da ein container mit position:relative ohne haslayout möglicherweise tschüss zu den enthaltenden Floats sagt. Im IE7 kriegen die es sogar hin, dass sich der komplette container verabschiedet.
Wie du es auch drehst und wendest, IE6+floats<position:relative<overflow kann tragisch viel Zeit verschlingen, ohne dass es je funktioniert. |
Sponsored Links |
|
|||
Vielleicht solltest du deinem äußersten Container, dem mit overflow, auch position:relative geben.
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Jquery Slider wird nicht korrekt dargestellt | snaky80 | Javascript & Ajax | 2 | 19.05.2016 18:14 |
CSS Menü Probleme beim IE7 | mainzer76 | CSS | 3 | 16.05.2012 13:37 |
IE7-IE8 bug ? Nachgeladene PNG werden nicht korrekt dargestellt. | Shorty_AR | Javascript & Ajax | 4 | 15.06.2011 08:48 |
Wordpress: Content im Quelltext VOR allem anderen, aber wie? | Bichareh | CSS | 4 | 13.06.2009 17:15 |
Nav-Liste wird nicht korrekt dargestellt? | tomtom | CSS | 4 | 03.05.2006 18:10 |