Welcome to WebmasterWorld Guest from 54.205.0.26

Forum Moderators: travelin cat

Message Too Old, No Replies

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)

New User

5+ Year Member

joined:June 30, 2009
posts: 4
votes: 0


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 July 4, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 20, 2005
posts:672
votes: 0


<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 July 5, 2009 (gmt 0)

New User

5+ Year Member

joined:June 30, 2009
posts: 4
votes: 0


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

New User

5+ Year Member

joined:June 30, 2009
posts: 4
votes: 0


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

Moderator This Forum from US 

WebmasterWorld Administrator travelin_cat is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 28, 2004
posts:3186
votes: 7


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 July 9, 2009 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 1, 2003
posts:815
votes: 0


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 July 9, 2009 (gmt 0)

New User

5+ Year Member

joined:June 30, 2009
posts:4
votes: 0


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!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members