homepage Welcome to WebmasterWorld Guest from 54.211.213.10
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / WebmasterWorld / The Macintosh Webmaster
Forum Library, Charter, Moderators: travelin cat

The Macintosh Webmaster Forum

    
Safari: mouseover+links not working - any insights?
I have built a site and the links don't work in Safari.
JaneneSkamp




msg:3943256
 3:08 pm on Jun 30, 2009 (gmt 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 -->

 

fredw




msg:3946254
 7:58 pm on Jul 4, 2009 (gmt 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.

JaneneSkamp




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

Thanks. Missed it. I'll check that now.

JaneneSkamp




msg:3946406
 8:20 am on Jul 5, 2009 (gmt 0)

Nope. No change. But thanks for picking that up.

travelin cat




msg:3946543
 5:18 pm on Jul 5, 2009 (gmt 0)

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.

timster




msg:3949462
 6:34 pm on Jul 9, 2009 (gmt 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]

JaneneSkamp




msg:3949531
 8:42 pm on Jul 9, 2009 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / The Macintosh Webmaster
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved