[CSS]Positioneren binnen overflowed div - Softwareontwikkeling

dinsdag 2 januari 2007 17:05

Acties:

Verwijderd

Topicstarter

Het volgende is er aan de hand:

Ik heb een div waarbinnen de inhoud variabel is (inhoud wordt geupdate met ajax technieken). Omdat ik niet wil dat mijn hele website verticaal wordt gerekt als er teveel content is, heb ik gekozen voor overflow:auto op het div element. Er verschijnt dan dus een scrollbalk wanneer de content te groot is.

Nu is het zo dat de content binnen die overflow div gepositioneerd wordt. in firefox werkt dit prima maar in internet explorer (zowel 6 als 7) gaat het helemaal mis en scrollen de gepositioneerde elementen niet mee.

Wanneer ik dit test zonder doctype declaratie werkt het wel in IE, maar ik werk met XHTML en wil ik ook zo houden.

Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hieronder een voorbeeld code:

code:

<div style="height:100px; width:300px; overflow:auto;">
    <div style="position:relative; height:40px;">dit is een regel text</div>
    <div style="position:relative; height:40px;">dit is een regel text</div>
    <div style="position:relative; height:40px;">dit is een regel text</div>
    <div style="position:relative; height:40px;">dit is een regel text</div>
</div>

Zoals je ziet wanneer je deze code even in IE draait (met XHML doctype) wordt de inhoud niet gescrolled en komt het gedeeltelijk onder het element te staan.

Weet iemand hier een oplossing voor? Ik moet echt positioneren en een scrollbalk is ook echt vereist bij de webapplicatie die ik aan het maken ben, anders werkt het gewoon niet lekker.

Alvast bedankt!

dinsdag 2 januari 2007 17:08

Acties:

tec

TEC

Meen dat je op de overkoepelende div de position property expliciet moet zetten. In dit geval zou ik hem op position:relative zetten.

[ Voor 26% gewijzigd door tec op 02-01-2007 17:09 ]

dinsdag 2 januari 2007 17:12

Acties:

Verwijderd

Topicstarter

tec schreef op dinsdag 02 januari 2007 @ 17:08:
Meen dat je op de overkoepelende div de position property expliciet moet zetten. In dit geval zou ik hem op position:relative zetten.

OMG het werkt! Hardstikke bedankt voor het snelle antwoord!

greets

dinsdag 2 januari 2007 17:15

Acties:

tec

TEC

Mooi zo

Ter info: Op deze manier kun je dus bepalen aan de hand van welk parent element jou child elements relatief gepositioneerd worden.