Forums

j_liu21

Has anyone encountered a unwanted transparency problem with the popup/rollover? When you mouse over the 1st link the popup acts transparent and you can still see the 2nd link thru the popup. The issue is corrected with Mozilla using z-index, but that doesn't see to work for ie7.0.

Attached is the sample code.

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta http-equiv=Refresh content=\"900\">
<title>Test</title>
<script language=\"Javascript\">
<!--
function ShowPop(id)
{
   document.getElementById(id).style.visibility = \"visible\";
}
function HidePop(id)
{
   document.getElementById(id).style.visibility = \"hidden\";
}
//-->
</script>

<style type=\"text/css\">
.popup
{ 	
	position:absolute; left:100px; top:0; width:200px;
	border:2px double;
	border-color:#000000;
	background-color:#f9f9f9;
	padding:4px;

	visibility:hidden;
}
</style>
</head>
<body>
<h3>Test</h3>

<span style=\"position: relative;\">
                    <span id=\"div1\" class=\"popup\"><strong>Category:</strong><br>List 1<br>List 2<br>List 3<br>List 4<br>List 5<br>List 6<br>List 7<br>List 8<br></span>
                    <a href=\"compare.cfm?Id=6\" onMouseover=\"ShowPop('div1');\" onMouseout=\"HidePop('div1');\">Mouse over me</a><br /></span>

<span style=\"position: relative;\">
                    <span id=\"div2\" class=\"popup\"><strong>Category 2:</strong><br>List 11<br>List 12<br>List 13<br>List 14<br>List 15<br>List 16<br>List 17<br>List 18<br></span>
                    <a href=\"compare.cfm?Id=7\" onMouseover=\"ShowPop('div2');\" onMouseout=\"HidePop('div2');\">This text is can be seen during previous mouseover</a><br /></span>

</body>
</html>

j_liu21

Here is an image of what happens

http://www.dialogr.com/hrpool/images/overlap.jpg

Argeaux

Its somehow messing up with the relative / absolute positions. If i remove the position relatives from the spans it is working, but probably not the way you want it to work ...

j_liu21

Yes I have it working without the nested relative, but am looking to show the popup relative to the link. It's interesting, I basically copied this from an example as you can see it's pretty simple. Odd that no one else has reported it.

treehouse : what would you like to learn today?

Forums

Ie issue with relative, absolute position test