Z-Index problems

[amandaNHT]

Ok, so I've got a div that shows up on mouseover by using Javascript to change classes. That's all well and good, but the stupid div doesn't show up in front of the other icons to mouse-over, even though I've gone as far as to set the z-index to 10,000 (z-index:10000

I've attached a screenshot of my problem.

I just noticed this in my last run-through, which sucks because we were going to go live this afternoon.

Any help/advice would be greatly appreciated! Thanks!

[amandaNHT]

ok, the winky face was not intentional... it was a ; and a )

[Cory R]

Are you using position: relative; in addition to the z-index?

[amandaNHT]

Yes. Here is an example of my code once it hits client-side and a link to one of the pages.

http://www.newhometeam.net/zyx/platmap.php?platID=65

<script type="text/javascript">
	function change_class(My_Element, My_Class) {
		document.getElementById(My_Element).setAttribute("class", My_Class);
	}
</script>

And in the body:

	<div id="lot1" style="position:absolute;left:20px;top:119px;z-index:4;">
		<a href="detail.php?platID=65&fpID=317&lotID=1593" style="z-index:5;display:block;width:37px;height:17px;" onMouseOver="change_class('tooltip1','visiDiv')" onMouseOut="change_class('tooltip1','hiddenDiv')">
		<img src="img/status/platmap_sold.gif" alt="Sold" style="-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);" /></a>
		
		<ul id="tooltip1" class="hiddenDiv" style="position:absolute;left:-10px;top:30px;z-index:10000 !important;">
			<li class="sold">Homesite 2 Ph I (Sold)</li>
			
			<li>The Thoreau-3225 Plan</li>

			<li>3,225 Sqft</li>
			<li>4 Bed / 2.75 Bath</li>
			<li>3-car Garage</li>
					
			<li>MLS #: 184561</li>
			
			
		</ul>
	</div>

[amandaNHT]

Oh, and the CSS:

.hiddenDiv{
	visibility:hidden;
	text-align:center;
	font-size:10px;
	position:relative;
	top:-5000px !important;
	left:-5000px !important;
	width:180px;
	padding:5px;
	background-color:#FFF;
	color:#000;
	list-style-type:none;
	border:4px #600 double;
	-moz-border-radius:30px 0;
	-webkit-border-radius:30px 0;
	border-radius:30px 0;
	z-index:-10000;
}
.visiDiv{
	text-align:center;
	font-size:10px;
	position:relative;
	width:180px;
	padding:5px;
	background-color:#FFF;
	color:#000;
	list-style-type:none;
	border:4px #600 double;
	-moz-border-radius:30px 0;
	-webkit-border-radius:30px 0;
	border-radius:30px 0;
	z-index:10000;
}

[Cory R]

Removing the z-index from the 'sold' DIVs worked for me and didn't seem to cause any problems.

[amandaNHT]

Yes! That works perfectly! It's glorious, thanks!