Hidden div displaying on rollover, but not with the right z-index

batcakes · 03-29-2011, 10:58 PM

I am a relative newbie tearing my hair out. I appreciate your effort in reading this post.

Using javascript, I am trying to get a hidden div, consisting of a paragraph with a CSS background, to appear, on rollover, over the bottom part of an image for a portfolio site.

My code works except for the following glitch: the text appears over the image, while the CSS background appears underneath it. I have tried as many z-index permutations as I could think of to fix this.

Are there any common fixes when divs are just unresponsive to style changes? In case the problem lies with either my CSS or my JavaScript, I will post in both subsections.

Code:

<script type="text/javascript>
window.onload=initAll;
function initAll() {
	document.getElementById("elemopic").onmouseover=unhide;
	document.getElementById("elemopic").onmouseout=hide;
}

 function unhide () {
	document.getElementById("elemoblurb").style.display="block";
 }
 
 function hide(){
	 document.getElementById("elemoblurb").style.display="none";
 }
 </script>

<style type="text/CSS">
#elemoblurb {
	z-index:10;
	background-image:url(images/elemoinfo.gif);
	width:401px;
	height:86px;
	margin:-105px 0px 0px 386px;
	padding:0px;
}

#elemoblurb p {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#ccc5c5;
	margin:15px 0px 0px 0px;
	padding:15px 0px 0px 15px;
}

#mainbloc {
	z-index:1;
	margin:29px 0px 0px 340px;
	padding:0px;
}
</style>

<body>
<div id="mainbloc">
<img id="Lswirl" src="images/Lswirl.gif" />
<img id="elemopic" src="images/elemo.gif" alt="Electric Lemonade logo re-design" />
<img id="Rswirl" src="images/Rswirl.gif" />
</div>

</div>

<div id="elemoblurb" class="hidden">
<p>A logo redesign project made in Adobe Illustrator using the pen tool.</p>
</div>

</body>

Thank you for reading!

abduraooft · 03-30-2011, 09:11 AM

Quote:

the text appears over the image, while the CSS background appears underneath it. I have tried as many z-index permutations as I could think of to fix this.

Check http://www.htmldog.com/reference/cssproperties/z-index/

Quote:

Specifies the order of relative or absolutely positioned boxes in the z-axis. The higher the number, the higher that box will be in the stack.