Welcome to WebmasterWorld Guest from 54.242.105.196

Forum Moderators: travelin cat

Safari: mouseover+links not working - any insights?

I have built a site and the links don't work in Safari.

   
3:08 pm on Jun 30, 2009 (gmt 0)

5+ Year Member



I am in the process of building a pro-bono site for a playgroup and it works perfectly in IE, Firefox and Opera. When accessed in Safari the links (whether mouseovers or not) do not work. I have built other sites with really similar code, and they work. Can anyone spot what I'm doing wrong here?

Thanks in advance for assistance,
J

HTML:

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link href="blb.css" rel="stylesheet" type="text/css" media="screen" />

<SCRIPT type="text/javascript" src="mouseover.js"></SCRIPT>

<title>Busy Little Beings</title>

</head>

<body text="#000000" link="#ffffff" alink="#ffffff" ahover="#ffffff" vlink="#ffffff">
<div id="header"><img src="landing/images/a_01.gif" width="900" height="505" alt=""><div>
<div id="top"><a href="home.php" onmouseover="over_image('img0');" onmouseout="off_image('img0')"><img src="landing/images/a_02.gif" width="316" height="158" border="0" name="img0"></a><img src="landing/images/a_03.gif" width="584" height="158" alt=""></div>

<div id="writing"><p><br><img src="arrow.gif">&nbsp;&nbsp;Half Term: 26th June to 5th July<br><br><img src="arrow.gif">&nbsp;&nbsp;Please remember to bring in bottle tops for <i>Music</i> theme.<br><br><img src="arrow.gif">&nbsp;&nbsp;We would like to qualify for <i>Collect-a-Can</i> so please bring in all your empty cans.</p><br></div>

</body>

</html>

CSS:

body {behavior:url(whatever-hover.htc); line-height:16px; text-align:justified; font-family:courier;
font-size:10px; color:#000000; text-transform:lowercase; vertical-align:top; background:#cfcfcf;
background-image:url(background.gif); background-repeat:repeat-x repeat-y; text-decoration:none; border:0; padding:0; margin:0;}

p {font-size:12px; text-align:justified; line-height:20px;}

a: link {color: #007836; text-decoration: none;}

#header{position:absolute; left: 0px; top: 0px; padding:0;}
#top{position:absolute; left: 0px; top: 505px; padding:0; z-index:-1; text-decoration:none;}
#spacer1{position:absolute; left: 0px; top: 162px; padding:0; z-index:-1; text-decoration:none;}
#spacer2{position:absolute; left: 0px; top: 177px; padding:0; z-index:-1; text-decoration:none;}
#content{position:absolute; left: 0px; top: 200px; padding:0; z-index:-1; text-decoration:none;}
#bottom{position:absolute; left: 0px; top: 527px; padding:0; z-index:-1; text-decoration:none;}
#writing{position:absolute; width:270px; z-index:1; left:570px; top:258px;}
#footer{position:absolute; width:900px; z-index:1; left:5px; top:700px; text-align:center; text-decoration:none; font-size:10px; color:#4060aa;}

JS:

<!-- Hide the script from old browsers --

img0_on = new Image(177,35);
img0_on.src="landing/images/b_02.gif";
img0_off = new Image(177,35);
img0_off.src="landing/images/a_02.gif";

function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// --End Hiding Here -->

7:58 pm on Jul 4, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



<div id="header"><img src="landing/images/a_01.gif" width="900" height="505" alt=""><div>

Don't know if it's causing your problem, but this div is not being closed properly.

8:18 am on Jul 5, 2009 (gmt 0)

5+ Year Member



Thanks. Missed it. I'll check that now.
8:20 am on Jul 5, 2009 (gmt 0)

5+ Year Member



Nope. No change. But thanks for picking that up.
5:18 pm on Jul 5, 2009 (gmt 0)

WebmasterWorld Administrator travelin_cat is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Janine,

Have you cleared Safari's cache? I've seen things like this happen, then I went to a different machine and found that I had solved the problem but the cache in the original browser was holding the older version.

6:34 pm on Jul 9, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Have you tried using Safari's JavaScript debugger? I gave it a try on your input and got the following errors, but that may be because I don't have your mouseover.js script.


ReferenceError: Can't find variable: over_image (repeated 2 times)
ReferenceError: Can't find variable: off_image (repeated 2 times)

See Apple's Safari Development Tools Page [developer.apple.com]

8:42 pm on Jul 9, 2009 (gmt 0)

5+ Year Member



I got a message in my inbox from Fred - it seems that for some reason
 position:absolute 
is causing the problem. If I remove it from my link divs the links and mouseovers are enabled in Safari.

Hope this helps someone else somewhere along the line, too. Thanks Fred!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month