Hi everyone,
I am working on a page and I want to do a hidden / visible DIV that appears when an image is mousedOver. Getting it to show / hide is fine, BUT...
When it appears it is interrupted by the content that it is supposed to be covering! The text field box and fieldset borders show through! I have tried assigning different zindex levels and cannot get the DIV to obscure the background material it is over. I am used to this being a problem in IE with Select fields, but i have never had this problem with Text before and never tried it over Fieldsets before.
Here is the relevent code (development page is NOT publicly available as a URL).
<
html>
<head>
<link href="Standard.
css" rel="stylesheet" type="text/
css">
<script language="JavaScript">
function ShowDetails(num) {
if (num == 0) {
document.getElementById('ContactDetails').style.vi sibility = 'hidden';
} else {
document.getElementById('ContactDetails').style.vi sibility = 'visible';
}
}
</script>
</head>
<body>
<div ID="ContactDetails" style="position: absolute; zindex: 10; top: 100px; left: 400px; width: 250px; height: 200px; visibility: hidden; border: 1px solid red; background-color: red;">
<fieldset>
Info on the person! I like this stuff and wonder why it does not like me?<br>
<br>
<br>
<br>
<br>
<br>
<br>
</fieldset>
</div>
<!--- IT IS DISPLAYING OVER THIS --->
<fieldset style="width: 765px; height: 300px; zindex: 2;">
CONTENT WITHIN THE FIELDSET
<input type="text" name="Text1" size="30" maxlength="30" value="default value"><br/>
</fieldset>
Thanks for any help!