[IE6 / IE7] Image overlay

[ViNyL]

Ik ben bezig met een slider die een foto laat zien met daar overheen een titel en een div met tekst die bij de foto hoort.

De slider en de content worden in alle browsers keurig weergegeven behalve in Internet Explorer 6 & 7. Dan verschijnt er een scroll balk onder in beeld en de breedte van de slides wordt genegeerd waardoor de vorige/volgende slide zichtbaar blijven.

Het probleem heb ik teruggebracht (komt uit een CMS) tot een kleinere opstelling om zo alle andere opmaak uit te sluiten, maar helaas blijft het probleem bestaan.

Als ik de div en titel verwijder uit de slider dan klopt de inhoud wel.

Vervolgens heb ik gekeken welke klasse het probleem veroorzaakt, de opbouw is als volgt:

HTML:

<div class="image">
<img src="images/bg1.jpg" alt="" />
<h2>Titel die mee moet scrollen</h2>
<div class="box">
<p>
Dit is de tekstbox waar de content die bij de foto inhoort komt te staan.
</p>
</div>
</div>

Mijn css code ziet er zo uit:

Cascading Stylesheet:

#slider .image {
position: relative;
width: 100%; /* for IE 6 */
}

#slider h2 {
top: 40px;
left: 175px;
color: #fff;
text-transform:uppercase;
font-size: 20px;
}

.box {
top:100px;
left: 175px;
color: #000;
font-size: 14px;
width: 640px;
height:130px;
background-color: #fff;
}

Het probleem in Internet Explorer wordt veroorzaakt door de "postition:relative". Iemand een idee waarom dit probleem voorkomt? Is dit een bug in Internet Explorer?

Ik heb al een border om mijn slider heen gedaan om te kijken of deze soms wordt opgerekt in IE maar dat is niet het geval. Misschien een andere manier van overlayen nodig?

Hier een voorbeeld met en een zonder de overlays.

[FlorisD]

Als je de inhoud van de LI een position: relative; geeft moet je deze ook meegeven aan het element wat de overflow: hidden; bevat, anders gaat IE7- inderdaad de fout in.

Zie ook http://snook.ca/archives/...ion_relative_overflow_ie/ voor wat meer uitleg.

[ViNyL]

Dat is inderdaad de oplossing voor het probleem! Die gaat in de bookmarks.

Vreemd, heb nog aardig wat rond gezocht maar niet in combinatie van de 2 termen omdat ik wel dacht dat de position:relative er mee te maken had maar niet de overflow.

Bedankt voor het linkje..!

[Zed_no1]

Tip die ik je nog wel mee geven: http://www.quirksmode.org/css/contents.html
Overzichtelijk welke elementen welke browser ondersteunen..