IE7: Overflow:auto ->Inhalt wird nicht gescrollt

[alias5000]

Hallo zusammen!
Ich habe einen etwas seltsamen Bug hier am Laufen und finde den Grund nicht.
Folgendes:
Die Box <div id="main"></div> ist eine Box mit festgelegter Höhe und Breite, sowie der CSS-Property overflow:auto;
Tritt in ihr ein übergroßer Text auf, werden je nach Bedarf Scrollbars angezeigt. Dies funktioniert in allen getesteten Browsern.

Allerdings tritt im IE7 bei mir das Problem auf, dass ich die Scrollbar hoch- und runterschieben kann, wie ich will, der Inhalt bleibt einfach immer stehen. Beim IE6 und IE8 funktionierts.

Folgender CSS-Code wird der main-div zugewiesen:

div#main {  
height:460px;  
width:515px;  
overflow:auto;  
margin-left:0;  
padding-left:25px;  
padding-top:10px;  
}

Habt ihr eine Idee, wie ich des Rätsels Lösung näher kommen könnte?

Gruß
alias5000

[Malcolm Beck´s]

hi,

Folgender CSS-Code wird der main-div zugewiesen:

div#main {

}

  

> Habt ihr eine Idee, wie ich des Rätsels Lösung näher kommen könnte?  
  
Wie sieht denn der (Original) HTML-Output aus, der beim Browser ankommt?  
  
Alles vom öffnenden `<div id="main"> bis zum schliessenden </div>`{:.language-html}, der Rest sollte natürlich ein [Valides](http://validator.w3.org/#validate_by_input) Dokument sein.  
  
mfg

-- 
echo '<pre>'; var\_dump($Malcolm\_Beck`s); echo '</pre>';  
  
array(2) {  
  ["SELFCODE"]=>  
  string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("  
  ["Meaningful"]=>  
  string(?) "[Der Sinn des Lebens ist deinem Leben einen Sinn zu geben](http://www.youtube.com/watch?v=VS9ecfD0K9c)"  
}

[alias5000]

hi,
danke für deine Reaktion!
HTML und CSS validieren.
Der HTML-Code sieht folgendermaßen aus:

<div id="main">  
<div class="inside">  
  
<div class="mod_article block" id="test">  
  
<div class="ce_text block">  
  
<h1>Überschrift1</h1>  
  
<p>Lorem ipsum...</p>  
  
<p>&nbsp;</p>  
  
<p>&nbsp;</p>  
  
</div>  
  
<div class="ce_text block">  
  
<h1>dfsd</h1>  
  
<p>Lorem ipsum  - ganz langer text...</p>  
  
</div>  
  
</div>  
  
</div>  
</div>  

Die CSS-Eigenschaften, die die divs innerhalb haben, habe ich bereits jeweils einzeln deaktiviert und getestet - ohne Erfolg.

Vielen Dank für eure Antworten
viele Grüße
alias5000

Anhang:

Ich liste sie trotzdem mal unten, damit es vollständig ist.

Das Eltern-Div zu div#main (div#container) besitzt folgende Stilvorgaben:

  
div#container  
background-color:#FFFFFF;  
clear:both;  
height:500px;  
overflow:hidden;  
padding:10px;  
}

Auch hier habe ich die CSS-Eigenschaften einmal ausgeblendet - ohne Erfolg.

CSS der divs innerhalb div#main:

  
.inside  
position:relative;  
text-align:left;  
}  
  
.block  
overflow:hidden; /*hat keine Auswirkung auf den Fehler*/  
}  
  
/*weggelassen: Items zur Schriftformatierung*/

[Malcolm Beck´s]

hi,

HTML und CSS validieren.

In deinem Fall auch unbedingt das CSS validieren.

Um erst mal eine mögliche Ursache auszuschliessen:

Ist dieses CSS Copy&Paste? Schau dir mal die Syntax genauer an.

div#container
  background-color:#FFFFFF;
}

> Auch hier habe ich die CSS-Eigenschaften einmal ausgeblendet - ohne Erfolg.  
  
Was meinst du mit ausgeblendet?  
  

> ~~~css
  

> .inside  
>   position:relative;  
> }  
>   
> .block  
>   overflow:hidden; /*hat keine Auswirkung auf den Fehler*/  
> }

Dieses CSS kann so auch nicht funktionieren, wenn es so in deiner Original-CSS steht, einmal durch den CSS-Valligator jagen.

mfg

[alias5000]

Hi,

hi,
In deinem Fall auch unbedingt das CSS validieren.

Hatte ich gemacht. HTML und CSS validieren.

Um erst mal eine mögliche Ursache auszuschliessen:

Ist dieses CSS Copy&Paste? Schau dir mal die Syntax genauer an.

Nein, das ist kein Copy&Paste. Um genau zu sein, wurde die CSS mit dem CSS-Framework des CMS Typolight aufgebaut. Da der Validator nicht meckert, ist das Stylesheet auch syntaktisch i.O.
Ich denke aber, dass es eher ein genereller Fehler ist, der weniger etwas mit den Typolight-Gegebenheiten zu tun hat, da der CSS-Code inhaltlich von mir stammt. Lediglich die syntaktische Umsetzung hat das Framework generiert.

»» ~~~css

»» div#container
»»   background-color:#FFFFFF;
»» }

> »» Auch hier habe ich die CSS-Eigenschaften einmal ausgeblendet - ohne Erfolg.  
>   
> Was meinst du mit ausgeblendet?  

Kurz rausgenommen, um zu sehen, ob das Fehlen dieser Werte einen Einfluss auf das Problem hat.  

>   
> »» ~~~css
  

> »» .inside  
> »»   position:relative;  
> »» }  
> »»  
> »» .block  
> »»   overflow:hidden; /*hat keine Auswirkung auf den Fehler*/  
> »» }

Dieses CSS kann so auch nicht funktionieren, wenn es so in deiner Original-CSS steht, einmal durch den CSS-Valligator jagen.

Könntest du erläutern, warum dies nicht tun kann?

Gruß
alias5000

[Malcolm Beck´s]

hi,

Könntest du erläutern, warum dies nicht tun kann?

Jage mal folgende 7 Zeilen durch diesen Validator:

.inside  
position:relative;  
text-align:left;  
}  
.block  
overflow:hidden; /*hat keine Auswirkung auf den Fehler*/  
}

Da fehlen die öffnenden Klammern.

mfg

[alias5000]

hi,

»» Könntest du erläutern, warum dies nicht tun kann?

Jage mal folgende 7 Zeilen durch diesen Validator:

.inside

position:relative;
text-align:left;
}
.block
overflow:hidden; /hat keine Auswirkung auf den Fehler/
}

>   
> Da fehlen die öffnenden Klammern.  

Hoppala, das habe ich übersehen - aber nur beim Kopieren (aus Firebug kopiert.  
Wie gesagt, ich habe die gesamte Seite mit HTML und CSS komplett und erfolgreich durch Validator gejagt.  
  
Mein Problem ist, dass ich nicht weiß, wo der Fehler herkommt, die Lokalisierung des Problems gelingt mir also nicht.  
Ich könnte hier größere Auschnitte aus HTML und CSS posten, aber das wird dann sehr länglich.  
  
Das Problem tritt wie gesagt ausschließlich beim Internet Explorer 7 auf. Nicht darunter, nicht darüber  
  
Gruß  
alias5000

[Malcolm Beck´s]

hi,

Mein Problem ist, dass ich nicht weiß, wo der Fehler herkommt, die Lokalisierung des Problems gelingt mir also nicht.

Es liegt am CSS, genauer gesagt an der Klasse .inside{}, siehe hier.

mfg

[alias5000]

hi,

»» Mein Problem ist, dass ich nicht weiß, wo der Fehler herkommt, die Lokalisierung des Problems gelingt mir also nicht.

Es liegt am CSS, genauer gesagt an der Klasse .inside{}, siehe hier.

mfg

Tatsächlich, herzlichen Dank! :-)

Darf ich noch fragen, wie du darauf gekommen bist, bzw. mit was dies zu tun hatte?

Viele Grüße
alias5000

[Malcolm Beck´s]

hi,

Darf ich noch fragen, wie du darauf gekommen bist,

Debugging ;)
Ich habe die Klassen einzeln von unten nach oben entfernt, um erstmal zu testen, ob es an denen liegt.

bzw. mit was dies zu tun hatte?

Vermutlich einer der vielen IE-Bugs -- die IEs haben soviele, dass ich mittlerweile nicht mal suche, welcher Bug das sein könnte.

mfg

[alias5000]

hi,

»» Darf ich noch fragen, wie du darauf gekommen bist,

Debugging ;)
Ich habe die Klassen einzeln von unten nach oben entfernt, um erstmal zu testen, ob es an denen liegt.

tja, dann habe ich diesen Wert wohl übersehen -.-
Nächstes Mal klappts koffentlich auch so mit dem Entkäfern :-)

»» bzw. mit was dies zu tun hatte?

Vermutlich einer der vielen IE-Bugs -- die IEs haben soviele, dass ich mittlerweile nicht mal suche, welcher Bug das sein könnte.

oh ja!

viele Grüße
alias5000