[CSS]overflow:hidden werkt niet in IE (?)

[Dr_Frickin_Evil]

Ik heb een pagina met een stel foto's erop (10 stuks per keer). Deze staan naast elkaar, in een divje (id: partypics). Dit divje staat op zijn beurt weer in een container-divje (id: container). Daarnaast heb ik 2 knopjes om te scrollen (naar links en naar rechts). De divjes hebben de volgende css properties:

code:

#content #container {
    background-color: #EFF7FF;
    border-style: solid none solid none;
    clear: both;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 600px;
    }
#content #container div { background-color: white; margin: -1px -1px 0 0; padding: 0; }
#content #partypics {
    border-style: solid none none none;
    clear: both;
    height: 100%;
    left: 0px;
    margin: -1px 0 0 0;
    padding: 0;
    position: relative;
    top: 0;
    white-space: nowrap;
    }
#content #partypics img { display: inline; float: none; margin: 5px 5px 5px 0; }

Dit werkt in Mozilla prima. In IE laat ie echter het divje waar de foto's instaan in z'n geheel zien. De overflow: hidden property van het container-div doet dus niks. Wat doe ik fout? Ik heb op een andere site iets soortgelijks, en daar werkt het prima.

[Verwijderd]

code:

#content #container div

moest dacht ik dit:

code:

div#content div#container

zijn

[Dr_Frickin_Evil]

dat maakt niet uit.

[AkaXakA]

Verwijderd schreef op 25 mei 2004 @ 19:07:

code:

#content #container div

moest dacht ik dit:

code:

div#content div#container

zijn

bzzzt.

code:

#content #container div

zegt: de alle div'jes in de #container die in #content zit, moeten de volgende stylen meekrijgen.

code:

#content, #container

zegt: zowel #content als #container krijgen de volgende stylen mee.

code:

#content

zegt: een element met content als id

code:

div#content

zegt: een div met content als id

Maar misschien moet je aan "#content #container div" de overflow:hidden meegeven.

[ Voor 9% gewijzigd door AkaXakA op 25-05-2004 20:39 ]

[Dr_Frickin_Evil]

Nee dat lijkt me niet, dan zou div met id 'partypics' de property overflow: hidden krijgen, en dat moet ik niet hebben, want dan kan ik niet meer scrollen.

[Dr_Frickin_Evil]

Heb ff een voorbeeldje online gezet:
http://131.155.241.57/test/test.html
In Mozilla werkt het prima, in IE wordt de div dus niet afgepakt, en loopt door tot buiten het scherm. Iemand een idee wat ik fout doe?

(het valt me trouwens wel op dat het scrollen opzich in IE een stuk soepeler gaat als in Mozilla)

[MarkvE]

Als je er dit van maakt werkt het ook in IE:

code:

#content #container {
    background-color: #EFF7FF;
    border-style: solid none solid none;
    clear: both;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 600px;
    }
#content #container div { background-color: white; margin: -1px -1px 0 0; padding: 0; }
#content #partypics {
    border-style: solid none none none;
    clear: both;
    height: 100%;
    left: 0px;
    margin: -1px 0 0 0;
    padding: 0;
    position: relative;
    top: 0;
    white-space: nowrap;
    width: 600px;
    overflow: hidden;
    }
#content #partypics img { display: inline; float: none; margin: 5px 5px 5px 0; }

Kennelijk heeft een dergelijke div in IE een breedte nodig om de overflow: hidden; te doen laten werken...

[Dr_Frickin_Evil]

Dat werkt niet hoor. Althans, de breedte is dan wel 600px (uiteraard), maar dan scrollt ie niet meer, en das toch ook best handig

[Verwijderd]

Kijk even hoe ik het een paar dagen geleden voor iemand in dit topic heb opgelost: [rml][ Flash/Javascript] Horizontale mouse-scroll[/rml]. Dat is dan wel een automatische scroller, maar de inhoud van de div wordt netjes verborgen.

[Dr_Frickin_Evil]

Thx, het heeft even geduurd, maar nu weet ik wat het is. De container-div moest de property position: relative (of absolute) krijgen. Nu werkt het wel.

[Verwijderd]

Dr_Frickin_Evil schreef op 26 mei 2004 @ 13:58:
Thx, het heeft even geduurd, maar nu weet ik wat het is. De container-div moest de property position: relative (of absolute) krijgen. Nu werkt het wel.

Klopt, vandaar de extra div die ik er nog omheen had gezet