CSS Z-index - IE8 falsche Anzeige

[gfeschu]

Also ich habe ein Dropdown Menü mit Jquery gebastelt bzw. von einem Tutorial übernommen und angepasst.

FF, Safari und so zeigen es alles korrekt an, nur bei IE8 verschwindet das Menü HINTER den anderen Elementen. Hier mal allen Code:

CSS von der Navi:

#navx {
	margin:0; 
	padding:0; 
	list-style:none;
}	
	
#navx li {
	float:right; 
	display:block; 
	width:100px; 
	background:#fff; 
	position:relative;
	margin: 0px 1px;
	z-index:5000; 
}
		
#navx li a {
	display:block; 
	padding:1px 5px 0 5px;  
	text-decoration:none; 
	text-align:left; 
	color:#494949;
	font-family: Arial;
	font-size: 15px;
}
		
#navx ul a:hover {
	color: #981B1E;
}
	
#navx ul {
	position:absolute; 
	left:0; 
	display:none; 
	margin:0 0 0 -1px; 
	padding:0; 
	list-style:none;
}
		
#navx ul li {
	width:120px; 
	float:left; 
	border-top:1px solid #aaa;
}
		
#navx ul a {
	display:block;  
	height:15px;
	padding: 8px 5px; 
	color:#000;
	font-family: Arial;
	font-size: 13px;
}
	
#navx ul a:hover {
	text-decoration:none;
}
		
*html #navx ul {
	margin:0 0 0 -2px;
}

Code von Dropdown:

<td>
	<ul id="navx">
		<li style="float:left"><a class="favlink" target="_blank" href="#" onclick="return false;"><nobr><script type="text/javascript">document.write(cellverlauf);</script></nobr></a>
			<ul>
				<li style="width:200px;"><a href="#"><nobr><script type="text/javascript">document.write(cellgelesen);</script></nobr></a></li>
				<li style="width:200px;"><a href="#"><nobr><script type="text/javascript">document.write(cellbearbeitet);</script></nobr></a></li>
				<li style="width:200px;"><a href="#"><nobr><script type="text/javascript">document.write(cellerstellt);</script></nobr></a></li>
				<li style="width:200px;"><a href="#"><nobr><script type="text/javascript">document.write(cellerstelltbearbeitet);</script></nobr></a></li>
			</ul>
		</li>
		<li><a class="favlink" target="_blank" href="#" onclick="return false;"><nobr><script type="text/javascript">document.write(cellinfoshilfe);</script></nobr></a>
			<ul>
				<li><a href="#"><script type="text/javascript">document.write(celldokumentationen);</script></a></li>
				<li><a href="#"><nobr>Intranet</nobr></a></li>
				<li><a href="mailto:blablabla"><nobr><script type="text/javascript">document.write(celldivision);</script></nobr></a></li>
			</ul>
		</li>
	</ul> 
</td>

Braucht ihr den Code von den anderen Elementen auch? Oder kann man mir schon hierbei helfen?

Vielen Dank!

 

[Gajel]

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

 

[gfeschu]

Thanks, das heisst ja das ich #nav ul (parent) z-index:3000 vergebe und dem li nur 1000 dann sollte es funktionieren?

Also bei mir nicht. Oder muss ich das TD nehmen?

 

[Gajel]

Wieso haust du die navi in eine tabelle? Das ist SEHR suboptimal. Hau das mal lieber in ein Div oder poste mal die ganze tabelle mit den fehlenden <tr> und <table> tags.

 

[gfeschu]

Da ich mit den cells das in drei Sprachen umsetzen muss, ging das am besten um überall einen gleichen Abstand zu haben, zwischen den verschiedenen Navipunkten. Und auch das skalieren war so am einfachsten. Also für mich jedenfalls.

Also hier mal die ganze Table:

<table width="99%">
	<tr>
		<td style="width:39px;"></td>
		<td class="tdlinks"><a class="favlink" href="#"><script type="text/javascript">document.write(cellfavoriten);</script></a></td>
	                <td id="tdspace"></td>
		<td class="tdlinks"><a class="favlink" href="#"><script type="text/javascript">document.write(cellprojekte);</script></a> </td>
	                <td id="tdspace"></td>
		<td class="tdlinks"><a class="favlink" href="#"><nobr><script type="text/javascript">document.write(cellzuweisungen);</script></nobr></a> </td>
	                <td id="tdspace"></td>
		<td class="tdlinks"><a class="favlink" href="#"><nobr><script type="text/javascript">document.write(cellmeinarbeitsbereich);</script></nobr></a></td>
	                <!-- <td id="tdspace"></td>
		<td class="tdlinks"><a class="favlink" href="#"><nobr><script type="text/javascript">document.write(celldetailsuche);</script></nobr></a> </td> !-->
	               <td id="tdspace"></td>
		<td>
			<ul id="navx">
				<li style="float:left"><a class="favlink" target="_blank" href="#" onclick="return false;"><nobr><script type="text/javascript">document.write(cellverlauf);</script></nobr></a>
					<ul>
						<li style="width:200px;"><a href="#"><nobr><script type="text/javascript">document.write(cellgelesen);</script></nobr></a></li>
						<li style="width:200px;"><a href="#"><nobr><script type="text/javascript">document.write(cellbearbeitet);</script></nobr></a></li>
						<li style="width:200px;"><a href="#"><nobr><script type="text/javascript">document.write(cellerstellt);</script></nobr></a></li>
						<li style="width:200px;"><a href="#"><nobr><script type="text/javascript">document.write(cellerstelltbearbeitet);</script></nobr></a></li>
					</ul>
				</li>
				<li><a class="favlink" target="_blank" href="#" onclick="return false;"><nobr><script type="text/javascript">document.write(cellinfoshilfe);</script></nobr></a>
					<ul>
						<li><a href="#"><script type="text/javascript">document.write(celldokumentationen);</script></a></li>
						<li><a href="#"><nobr>Intranet</nobr></a></li>
						<li><a href="mailto:blabla"><nobr><script type="text/javascript">document.write(celldivision);</script></nobr></a></li>
					</ul>
				</li>
			</ul> 
		</td>
	</tr>
</table>

.tdlinks{
	width: 10px;
}

#tdspace{
	width: 27px;
}