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:
XHTML 1.0 and 1.1 are quite different.

1.1 is designed for XML modular appications, rather than text/html based websites.

1.1 also has dodgy support on varying versions of IE and Firefox, so you'll be shooting yourself in the foot trying to get your site working perfectly across a range of browsers. :)
 
Back
Top Bottom