Hallo,

Ik ben bezig met mijn eigen website maar loop tegen een vreemd probleem aan.
IE7, ja ik weet het *** browser, maar wil toch dat mijn website daar fatsoenlijk draait.
Ik heb via jquery een dropdown menu gemaakt, deze werkt in IE8, safari, mozilla en chrome. Maar wanneer ik in mijn IE7 modus kijk valt de dropdown achter de div.
Hoe kan ik dit verhelpen?

Stukje code:


<div class="FullButton">
	<a href="#" title="Referenties" class="Link">
		<div class="button">
			<span class="LinkColor">Referenties</span>
		</div>
	</a>
	<ul class="submenu">
		<li><a href="#" class="sublink" title="Submenu 1">Submenu 1</a></li>
		<li><a href="#" class="sublink" title="Submenu 1">Submenu 2</a></li>
		<li><a href="#" class="sublink" title="Submenu 1">Submenu 3</a></li>
		<li><a href="#" class="sublink" title="Submenu 1">Submenu 4</a></li>
	</ul>
</div>


en mijn css voor dit stukje is:

.button {
	height:88px;
	width:120px;
	background-color:#FFFFFF;
	text-align:center;
	line-height:80px;
	background-image:url('images/orange_corner.png');
	background-position:112px 70px;
	background-repeat:no-repeat;
}

.LinkColor { color:#000000; }
a:link.sublink { text-decoration:none; color:#000000; }
a:active.sublink { text-decoration:underline; color:#000000; }
a:hover.sublink { text-decoration:underline; color:#000000; }
a:visited.sublink { text-decoration:none; color:#000000; }

a:link.Link { text-decoration:none; font-size:20px; color:#E8622A; }
a:active.Link { text-decoration:underline; font-size:20px; color:#E8622A; font-weight:bold; }
a:hover.Link { text-decoration:underline; font-size:20px; color:#E8622A; font-weight:bold; }
a:visited.Link { text-decoration:none; font-size:20px; color:#E8622A; }

ul.submenu {
	list-style:none;
	margin:0px;
	padding:5px;
	display:none;
	background-color:#FFFFFF;
	width:110px;
	height:143px;
	overflow:hidden;
	/* for IE */
	filter:alpha(opacity=60);
	/* CSS3 standard */
	opacity:0.6;
	position:absolute;
	z-index:1;
}

.FullButton {
	width:120px;
	position:relative;
	float:right;
}


Link van mijn lay-out: <link verwijderd>
FullButton(buitenste div) maakt zo dat witte blok met tekst erin

Graag hoor ik voor tips
probeer eens het oranje plaatje een z-index van 0 te geven..IE is nogal eigenwijs daarin
Heeft helaas geen zin...


#imghead{ 
	min-height:152px; 
	position:relative;
	background-image:url('images/orange_bg.png');
	background-position:center; 
	background-repeat: no-repeat;
	/*background-position:center;*/
	background-color:#e85826;
	z-index:0;
}
Hallo allemaal,

na lang zoeken is het mij gelukt en graag deel ik jullie daarom ook met de oplossing.
IE7 en IE6 vinden een z-index van 0 niet genoeg. Hierin zijn zij nog dat dit de eerste laag is.(0,1,2,3 etc.)
Daarom, indien een er iets achter je div/ad terecht komt, voeg een z-index van -10000 toe op de div/object dat jij naar de achtergrond wilt hebben.
Dus -<waarde> zorgt dat het echt naar de achtergrond wordt gedrukt!

Ik hoop jullie voldoende te hebben ingelicht en succes!

Ps. Ja mods ik heb nieuwe post aangemaakt binnen 24 uur, maar dit is wel de oplossing ;-) Bedankt voor begrip

Reageren