IE7 div moet over div

Door Wim E op 17-10-2009 11:50

1.465 views

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

#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; }