zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden overflow:hidden im IE nicht korrekt dargestellt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.06.2006, 14:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2005
Beiträge: 56
theonlyrobi befindet sich auf einem aufstrebenden Ast
Standard 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>
Hier die Datei zum anklicken: http://data.robi-im-netz.de/htmltest/overflow.html

Robert
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.06.2006, 09:06
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2005
Beiträge: 56
theonlyrobi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.06.2006, 12:10
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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)
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #4 (permalink)  
Alt 19.06.2006, 12:23
Neuer Benutzer
neuer user
 
Registriert seit: 19.06.2006
Beiträge: 4
morestyle befindet sich auf einem aufstrebenden Ast
Standard

@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>
Mit Zitat antworten
  #5 (permalink)  
Alt 19.06.2006, 12:46
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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
  • overflow:hidden hat, und dazu auch
  • haslayout=true (wegen der width-Angabe)

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (19.06.2006 um 12:52 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 19.06.2006, 12:56
Neuer Benutzer
neuer user
 
Registriert seit: 19.06.2006
Beiträge: 4
morestyle befindet sich auf einem aufstrebenden Ast
Standard

Das heißt, wenn ich alle Angaben so nutzen möchte (sie sind für ein Script wichtig), muss ich den Quirksmode gehen?
Mit Zitat antworten
  #7 (permalink)  
Alt 19.06.2006, 13:00
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #8 (permalink)  
Alt 19.06.2006, 13:06
Neuer Benutzer
neuer user
 
Registriert seit: 19.06.2006
Beiträge: 4
morestyle befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 19.06.2006, 13:14
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.06.2006, 13:24
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Vielleicht solltest du deinem äußersten Container, dem mit overflow, auch position:relative geben.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
IE7-IE8 bug ? Nachgeladene PNG werden nicht korrekt dargestellt. Shorty_AR Javascript & Ajax 4 15.06.2011 07:48
Wordpress: Content im Quelltext VOR allem anderen, aber wie? Bichareh CSS 4 13.06.2009 16:15
Content Bereich verschiebt sich im IE Hotbananaoli CSS 12 26.02.2009 17:33
CSS Menü nicht korrekt dargestellt im FF michael-r CSS 9 01.02.2007 16:39
Nav-Liste wird nicht korrekt dargestellt? tomtom CSS 4 03.05.2006 17:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:02 Uhr.