Menu
I have a page which validates, and works fine in Firefox and IE on PC, but apparently fails in Safari on Mac.
I say apparently as I don’t have access to a Mac, but the person I’m doing the site for does and uses Safari (2.0.4) which is the only reason I know there is a fault somewhere.
Anyway.. the script is a simple rollover script on an imagemap that onmouseover puts up text in Div’s showing what the hotspot leads to, and onmouseout hides it again.
I’ve changed scripts but the result is always the same. Works on PC (FF and IE) but in safari the text div’s don’t appear at all.
Can anyone spot what is wrong and suggest a fix? Any help would be very much appriciated. Thanks.
Page code below:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/html40/loose.dtd”>
<html><head>
<title>Roxie 77.com: The Official Home Of Ryan Roxie/Roxie 77</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″><meta name=”author” content=””>
<meta name=”description” content=”Roxie 77″>
<meta name=”keywords” content=”Ryan Roxie”>
<LINK REL=”SHORTCUT ICON” HREF=”favicon.ico”>
<script language=”JavaScript” type=”text/JavaScript”>
function Hide(str) {
x = document.getElementById(str);
x.style.visibility = ‘hidden’;
}
function Show(str) {
x = document.getElementById(str);
x.style.visibility = ‘visible’;
}
</script>
<style type=”text/css”>
A {color:#FFFFFF;}
.style1 {
color: #FFFFFF;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-width: 1px;
}
#newsdiv {position:relative; left: 300px; top: -15px; visibility: hidden; z-index:4;}
#peacediv {position:relative; left: 340px; top: 25px; visibility: hidden; z-index:4;}
#wikidiv {position:relative; left: 480px; top: 70px; visibility: hidden; z-index:4;}
#roxie77myspacediv {position:relative; left: 480px; top: 170px; visibility: hidden; z-index:4;}
#ryanmyspacediv {position:relative; left: 480px; top: 210px; visibility: hidden; z-index:4;}
#yahoodiv {position:relative; left: 480px; top: 340px; visibility: hidden; z-index:4;}
#rocketdiv {position:relative; left: 40px; top: 320px; visibility: hidden; z-index:4;}
#podcastsdiv {position:relative; left: 40px; top: 165px; visibility: hidden; z-index:4;}
#blogdiv {position:relative; left: 20px; top: -35px; visibility: hidden; z-index:4;}
#emaildiv {position:relative; left: 120px; top: -125px; visibility: hidden; z-index:4;}
#blackoutdiv {position:relative; left: 420px; top: 300px; visibility: hidden; z-index:4;}
#dpmdiv {position:relative; left: 250px; top: 55px; visibility: hidden; z-index:4;}
#zorrodiv {position:relative; left: 250px; top: -75px; visibility: hidden;z-index:4;}
</style>
<script type=”text/javascript” src=”ufo.js”></script>
</head>
<body bgcolor=”#014F97″ style=”text-align: left;” >
<div ID=”header” style=”position:relative; top:0px; width:700px; margin:0 auto; text-align: left; z-index:1″>
<table width=”700″ border=”0″>
<tr>
<td style=”width:98px;”><img src=”images/globe.jpg” alt=”Roxie 77″ width=”98″ height=”99″ ></td>
<td><applet codebase=”LED/” code=”LED.class” width=500 height=48>
<param name=”script” value=”LED/roxie.led”>
<param name=”border” value=”2″>
<param name=”bordercolor” value=”100,130,130″>
<param name=”spacewidth” value=”3″>
<param name=”wth” value=”122″>
<param name=”font” value=”LED/default.font”>
<param name=”ledsize” value=”3″>
</applet>
</td>
<td style=”width:98px;”><img src=”images/globe.jpg” alt=”Roxie 77″ width=”98″ height=”99″ ></td>
</tr>
</table>
</div>
<div id=”airportdiv” style=”position:relative; top:0px; width:700px; height:560px; margin:0 auto; text-align: left; z-index:2″>
<div align=”center”>
<img src=”images/airport3.gif” alt=”Roxie 77 Airport” width=”515″ height=”544″ border=”0″ usemap=”#airportMap” > </div>
<div id=”menuwrapper” style=”position: relative; top:-544px; width:700px; margin:0 auto; text-align:left; z-index:1; visibility:hidden;”>
<div class=”style1″ id=”newsdiv” style=”width:200px;” >GATE 1: NEWS</div>
<div class=”style1″ id=”peacediv” style=”width:350px;” >GATE 2: PEACE, LOVE AND ARMAGEDDON</div>
<div class=”style1″ id=”wikidiv” style=”width:250px;”>GATE 3: ROXIE WIKIPEDIA</div>
<div class=”style1″ id=”roxie77myspacediv” style=”width:230px;” >GATE 4: ROXIE 77 MYSPACE</div>
<div class=”style1″ id=”ryanmyspacediv” style=”width:250px;”>GATE 5: RYAN ROXIE MYSPACE</div>
<div class=”style1″ id=”yahoodiv” style=”width:250px;”>GATE 6: OFFICAL MAILING LIST</div>
<div class=”style1″ id=”rocketdiv” style=”width:260px;”>GATE 7: ROXIE ON THE ROCKET</div>
<div class=”style1″ id=”podcastsdiv” style=”width:200px;” >GATE 8: PODCASTS</div>
<div class=”style1″ id=”blogdiv” style=”width:220px;” >GATE 9: THE ROXIE BLOG</div>
<div class=”style1″ id=”emaildiv” style=”width:200px;”>GATE 10: EMAIL ROXIE!</div>
<div class=”style1″ id=”blackoutdiv” style=”width:270px;”>GATE 11: OPERATION BLACKOUT</div>
<div class=”style1″ id=”dpmdiv” style=”width:230px;”>GATE 12: DAD’S PORNO MAG</div>
<div class=”style1″ id=”zorrodiv” style=”width:220px;”>GATE 13: GROUND ZORRO</div>
</div>
<div align=”center” id=”player2″ style=” position:relative; top:-250px; z-index:1; width:700px;”>
<script type=”text/javascript”>
var FU = { movie:”mp3player.swf”,width:”200″,height:”40″,majorversion:”7″,build:”0″,bgcolor:”#014F97″,
flashvars:”file=playlist.xml&repeat=true&showdigits=false&lightcolor=0xcc0000&autoscroll=true&showeq=false” };
UFO.create( FU, “player2″);
</script>
</div>
</DIV>
<br>
<div ID=”footer” style=”position:relative; top:0px; width:700px; margin:0 auto; text-align: left; z-index:1″>
<table width=”700″ border=”0″>
<tr>
<td style=”width:98px;”><img src=”images/globe.jpg” alt=”Roxie 77″ width=”98″ height=”99″ ></td>
<td>
<img src=”images/panam_2.jpg” alt=”Roxie 77: The Only Way To Fly” width=”491″ height=”38″ align=”top”>
</td>
<td style=”width:98px;”><img src=”images/globe.jpg” alt=”Roxie 77″ width=”98″ height=”99″ ></td>
</tr>
</table>
<map name=”airportMap”>
<area shape=”circle” coords=”404,87,19″ href=”peace/” alt=”Peace, Love And Armageddon”
onMouseOver=”Show(‘peacediv’)” onMouseOut=”Hide(‘peacediv’)”>
<area shape=”circle” coords=”479,160,22″ href=”http://en.wikipedia.org/wiki/Ryan_Roxie” alt=”Wikipedia”
onMouseOver=”Show(‘wikidiv’)” onMouseOut=”Hide(‘wikidiv’)”>
<area shape=”poly” coords=”229,5,301,6,301,17,271,45,260,45,230,17″ href=”r77news/” alt=”News”
onMouseOver=”Show(‘newsdiv’)” onMouseOut=”Hide(‘newsdiv’)”>
<area shape=”circle” coords=”479,272,26″ href=”http://www.myspace.com/roxie77″ alt=”Roxie 77 MySpace”
onMouseOver=”Show(‘roxie77myspacediv’)” onMouseOut=”Hide(‘roxie77myspacediv’)”>
<area shape=”circle” coords=”418,335,25″ href=”http://www.myspace.com/ryanroxie” alt=”Ryan’s MySpace”
onMouseOver=”Show(‘ryanmyspacediv’)” onMouseOut=”Hide(‘ryanmyspacediv’)”>
<area shape=”circle” coords=”417,412,22″ href=”http://launch.groups.yahoo.com/group/Ryan_Roxie_77/” alt=”Mailing List”
onMouseOver=”Show(‘yahoodiv’)” onMouseOut=”Hide(‘yahoodiv’)”>
<area shape=”circle” coords=”103,417,24″ href=”http://www.rocket.fm” alt=”Roxie On The Rocket”
onMouseOver=”Show(‘rocketdiv’)” onMouseOut=”Hide(‘rocketdiv’)”>
<area shape=”circle” coords=”24,292,20″ href=”http://feeds.feedburner.com/Roxie77″ alt=”Podcasts”
onMouseOver=”Show(‘podcastsdiv’)” onMouseOut=”Hide(‘podcastsdiv’)”>
<area shape=”circle” coords=”63,171,16″ href=”http://roxie77.blogspot.com” alt=”Ryan’s Blog”
onMouseOver=”Show(‘blogdiv’)” onMouseOut=”Hide(‘blogdiv’)”>
<area shape=”circle” coords=”145,105,16″ href=”mailto:[email protected]” alt=”Email Roxie!”
onMouseOver=”Show(’emaildiv’)” onMouseOut=”Hide(’emaildiv’)”>
<area shape=”rect” coords=”298,427,336,503″ href=”blackout/” alt=”Operation Blackout”
onMouseOver=”Show(‘blackoutdiv’)” onMouseOut=”Hide(‘blackoutdiv’)”>
<area shape=”rect” coords=”219,300,310,322″ href=”dpm” alt=”Dad’s Porno Mag”
onMouseOver=”Show(‘dpmdiv’)” onMouseOut=”Hide(‘dpmdiv’)”>
<area shape=”circle” coords=”266,211,17″ href=”groundzorro” alt=”Ground Zorro”
onMouseOver=”Show(‘zorrodiv’)” onMouseOut=”Hide(‘zorrodiv’)”>
</map>
</div>
</body>
</html>