My script won’t work in Internet Explorer. Help?

I wrote a script (with help from jQuery) to show an image preview of a product when you mouse over the magnifying glass. The problem is, it doesn’t work in Internet Explorer, but it works with every other browser. Here’s the link: [url]http://tiny.cc/fa0jy[/url]

I have it turned off for IE right now, but when it’s on, the div that is supposed to become unhidden and in a relative position with the second highest z-index, is, well, not. It just appears inline with the rest of the elements and pushes everything else out of the way when it appears after hovering over the magnifying glass.

I figure it might be because the host places some styling before the doctype is declared, but I can’t do anything about that, I don’t think. I’ve tried removing it with a script, but it didn’t work. Do you think this is the problem?

Here’s my script (with css too), btw. I’ve had to do a few workarounds, since I can’t directly edit the html of the items on the page.

(the jquery library is sourced in the head, btw)

[CODE]
<style type=”text/css”>
.hidden {display:none; z-index:2;}
.visible {background-image:url(‘http://www.gogglesandglasses.com/f/popupborder.png’); z-index:2; position:fixed; left:25&#37;; top:10%; height:515px; width:683px;}
.visible img {height:480px; width:640px; margin-top:10px; border-width:0px;}
.hide:hover{z-index:3; opacity:0;}
</style>

<script type=”text/javascript”>
pic1= new Image(100,25);
pic1.src=”http://www.gogglesandglasses.com/i/Buttons/loading.gif”;
pic2= new Image(100,25);
pic2.src=”http://www.gogglesandglasses.com/f/popupborder.png”;
var browser=navigator.appName;
var aaa;
var ccc;
var bbb;

if (browser!=”Microsoft Internet Explorer”)
{
$(document).ready(function(){
$(“p img”).after(“<img src=”/f/Magnifying-Glass-icon.png” class=”hide” onmouseover=”aaa=this.parentNode.childNodes[1].src;ccc=aaa.split(‘http://www.gogglesandglasses.com/t’)[1];bbb=’http://www.gogglesandglasses.com/i’;this.parentNode.childNodes[3].className=’visible’;this.parentNode.childNodes[3].firstChild.src=bbb+ccc;” onmouseout=”this.parentNode.childNodes[3].className=’hidden’;” style=”position:relative; top:-90; height:16px; width:16px; border:0px;”></img><div class=”hidden”><img src=”http://www.gogglesandglasses.com/i/Buttons/loading.gif”/></div>”);

})

}

</script>[/CODE]

Also in #JavaScript _↴