Script doesn't work in IE6

Hello, I'm a javascript newb, and I have been trying to piece together a script to pop up informational divs about certain items when clicked. I found this older script on a site that works like I'd like, but didn't work in IE6. A friend offered me some advice and I tried modifying the script to get it to work in IE6, but of course, it wasn't that easy.

I'm posting the whole page, since it isn't long, and I don't know where the problem is. :(

Thanks for your help.

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" /> <title>PopUp Div + Background Disable</title> <style type="text/css"> .parentDisable { z-index:999; width:100%; height:100%; display:none; position:absolute; top:0; left:0; background-color: #ccc; color: #aaa; opacity: .4; filter: alpha(opacity=50); } #popup { width:500px; height:400px; position:absolute; top:200px; left:300px; color: #000; background-color: #fff; border: 2px solid black; } </style> <script type="text/javascript"> function pop(div) { object=getObj(div) object.style.display='block'; return false } function hide(div) { object=getObj(div) object.style.display='none'; return false } //****************************************************************** function getObj(cName){ var obj1; if (document.getElementById) { obj1 = document.getElementById(cName); } else if (document.all) { obj1 = document.all[cName]; } else if (document.layers) { obj1 = document.layers[cName]; } else { obj1 = document.getElementById(cName); } return obj1; } </script> </head> <body> <div id="pop1" class="parentDisable"> <div id="popup"> This is popup 1<p> <a href="#" onclick="return hide('pop1')">Close</a> </p> </div></div> <div id="pop2" class="parentDisable"> <div id="popup"> This is popup 2<p> <a href="#" onclick="return hide('pop2')">Close</a> </p> </div></div> <center> <h3>Simple Popup Div + Background Disable Example</h3> </br></br> <a href="#" onclick="return pop('pop1')">Popup 1</a> </br></br> <a href="#" onclick="return pop('pop2')">Popup 2</a> </center> </body> </html>

I'm not sure, but I believe IE6 doesn't handle "getobj." You may want to amend this to "document.getelementbyID("idname")" or "document.getElementbyTagName("div").

First, a basic bewilderment: why do you need an XHTML Doctype? Why not a HTML strict? Are you intend to work with XML documents? If not, an XHTML Doctype will rather confound you.

Check out...
http://jszen.blogspot.com/2005/04/ie...er-caveat.html

Fixed!

IE does not understand the width 100% and height 100% correctly with an absolutely positioned element. I have included the code to resolve this:

width: expression(this.offsetParent.offsetWidth);
height: expression(this.offsetParent.offsetHeight);

Here is the code in your original post with some other minor corrections ;)

-----

<!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" />
<title>PopUp Div + Background Disable</title>
<style type="text/css">
.parentDisable
{
z-index:999;
width:100%;
height:100%;
width: expression(this.offsetParent.offsetWidth);
height: expression(this.offsetParent.offsetHeight);
display:none;
position:absolute;
top:0;
left:0;
background-color: #ccc;
color: #aaa;
opacity: .4;
filter: alpha(opacity=50);
}
#popup
{
width:500px;
height:400px;
position:absolute;
top:200px;
left:300px;
color: #000;
background-color: #fff;
border: 2px solid black;
}
</style>
<script type="text/javascript">
function pop(div)
{
object=getObj(div);
object.style.display='block';
return false
}
function hide(div)
{
object=getObj(div);
object.style.display='none';
return false
}
//******************************************************************
function getObj(cName){
var obj1;
if (document.getElementById) {
obj1 = document.getElementById(cName);
} else if (document.all) {
obj1 = document.all[cName];
} else if (document.layers) {
obj1 = document.layers[cName];
} else {
obj1 = document.getElementById(cName);
}
return obj1;
}
</script>
</head>
<body>

<div id="pop1" class="parentDisable">
<div id="popup">
This is popup 1<p>
<a href="#" onclick="return hide('pop1')">Close</a>
</p>
</div>
</div>
<div id="pop2" class="parentDisable">
<div id="popup">
This is popup 2<p>
<a href="#" onclick="return hide('pop2')">Close</a>
</p>
</div>
</div>
<center>
<h3>Simple Popup Div + Background Disable Example</h3>
<br /><br />
<a href="#" onclick="return pop('pop1');">Popup 1</a>
<br /><br />
<a href="#" onclick="return pop('pop2');">Popup 2</a>
</center>

</body>
</html>