Browserkompatibilität overflow:hidden

[Eric]

Hallo,

bin gerade dabei, mir mit JavaScript eine Scroll-Funktion zu bauen. Dazu benutze ich grundsätzlich 2 ineinandergelegte Divs, z.B.:

<div style="overflow:hidden;width:100px;height:200px">
<div id="scrollMich">
Content
.
.
.
.
.
/Content
</div>
</div>

Dabei wird das div mit der ID scrollMich bewegt/positioniert und wenn es die Grenzen des äußeren divs überschreitet, wird der Text/Ihnhalt abgeschnitten. Was funktioniert nicht:

Opera:
an sich korrekt, nur absolut positionierte Elemente werden _immer_ dargestellt ( auch wenn sie eigentlich unsichtbar sein sollten )

IE:
Alles wird dauerhaft dargestellt, overflow:hidden wird scheinbar ignoriert

FF:
korrekte Anzeige :)

Ideen zur Behebung der Probleme?

Grüße

Eric

[Tobias Müller]

Hallo Eric,

<div style="overflow:hidden;width:100px;height:200px">
<div id="scrollMich">
Content
.
.
.
.
.
/Content
</div>
</div>

Dein geposteter Code ist ein bisschen dürftig um hier eine definitive Aussage treffen zu können.

Ich vermute aber stark, dass es daran liegt, dass das umgebende Element mit der Eigenschaft overflow:hidden keine von "static" abweichende Positionierung aufweist.

MfG, Tobias Müller

[Eric]

Hallo

Ich vermute aber stark, dass es daran liegt, dass das umgebende Element mit der Eigenschaft overflow:hidden keine von "static" abweichende Positionierung aufweist.

Huh? Ich weiß nicht so ganz, was du meinst, aber hier gern etwas mehr Code:

  
<div style="width:100%;height:400px;overflow:hidden" id="visibleHeight_scrollInvItems">  
<div class="scroll_up" id="scrollUp_scrollInvItems" onMouseDown="scrollPergament('scrollInvItems',-10, 45)" onMouseUp="scrollEnd()" ondblclick="scrollSkip('scrollInvItems', 'top', 45)" style="top:20px;left:310px;display:block"></div>  
<div class="scroll_bar" id="scroll_bar_scrollInvItems" style="top:45px;left:310px;display:block"></div>  
<div class="scroll_circle" id="scroll_circle_scrollInvItems" style="top:45px;left:319px;display:block"></div>  
<div class="scroll_down" id="scrollDown_scrollInvItems" onMouseDown="scrollPergament('scrollInvItems',10, 45)" onMouseUp="scrollEnd()" ondblclick="scrollSkip('scrollInvItems', 'bottom', 45)" style="top:152px;left:310px;display:block"></div>  
<div class="scroll" id="scrollInvItems" style="bottom:0px">  
Content  
</div>  
</div>  

Hier sind jetzt noch die Divs drin, um die Scrollbar anzuzeigen.
Die wichtigsten sind

  
<div style="width:100%;height:400px;overflow:hidden" id="visibleHeight_scrollInvItems">  
    <div class="scroll" id="scrollInvItems" style="bottom:0px">  
        Content  
    </div>  
</div>  

Achja, vielleicht meintest du ja das hier:

  
.scroll {  
 position:relative;  
 bottom:0px;  
}  

Eric

[Tobias Müller]

Hallo Eric,

<div style="width:100%;height:400px;overflow:hidden" id="visibleHeight_scrollInvItems">
    <div class="scroll" id="scrollInvItems" style="bottom:0px">
        Content
    </div>
</div>

>   
> Achja, vielleicht meintest du ja das hier:  
>   
> ~~~css
  

> .scroll {  
>  position:relative;  
>  bottom:0px;  
> }  
> 

Dem umgebenden Element mit der ID "visibleHeight_scrollInvItems" solltest Du jetzt auch noch ein position:relative mitgeben.

MfG, Tobias

[Eric]

Hallo,

Dem umgebenden Element mit der ID "visibleHeight_scrollInvItems" solltest Du jetzt auch noch ein position:relative mitgeben.

Wunderbar, funktioniert einwandfrei! Großes Dankeschön!
Kannst du mir auch erklären, warum das dorthin muss? Denn nachvollziehen kann ich es nicht.

Grüße,

Eric

[Tobias Müller]

Hallo Eric,

Kannst du mir auch erklären, warum das dorthin muss? Denn nachvollziehen kann ich es nicht.

Das kann ich Dir leider nicht sagen, da ich nicht in die Köpfe der IE-Entwickler sehen kann. ;-) Firefox macht es ja richtig.

MfG, Tobias Müller

[rfb]

Moin

Wozu brauchst du überhaupt die DIV-Schachtelung?

Gruß
rfb

[Eric]

Wozu brauchst du überhaupt die DIV-Schachtelung?

Das äußere div grenzt den sichtbaren Bereich ab, das innere Div beinhaltet den gesamten Content, also der scrollbare Bereich.

Grüße,

Eric