Javascript mouseover problem

Soldato
Joined
16 Dec 2003
Posts
2,697
I'm having a problem with mouseover javascript which I found here. I've change the doctype to XHTML 1.1 and the mouseover doesn't work in Firefox :confused:. The original code as shown in the website is HTML 4.0 and that works fine in both IE and FF.

Here's the code I have (adjusted for XHTML 1.1 valid)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic Javascript Pop Up</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="rollover.css"/>

<script type="text/javascript">
<!--
function show_it()
{
document.all.box1.style.visibility = "visible";
}

function hide_it()
{
document.all.box1.style.visibility = "hidden";
}
-->
</script>
</head>
<body>
<div>
<a href="index.html" onmouseover="show_it()" onmouseout="hide_it()">Hover Here For Pop Up</a>
<div id="box1">
<h2>HI There. I'm a pop up box</h2>
</div>
</div>
</body>
</html>
and the CSS:

#box1
{
position: absolute;
top: 50px;
left: 100px;
border: solid 3px #000000;
background-color: #ffff00;
visibility: hidden;
}
Any ideas why it doesn't work in Firefox when I change the doctype to XHTML 1.1?

I don't want to use CSS rollovers for now as I'm required to use Javascript rollovers :(
 
Last edited:
Back
Top Bottom