• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 572
  • Last Modified:

Safari CSS (or JavaScript) related problem

Hi

I have a problem in Safari on Mac OS X 10.4.8 with the display of tooltip-style footnotes. It works in IE, Firefox and Opera but not Safari. I think the problem is CSS related. Normally, onmouseover the footnote is displayed, on mouseout it is hidden again. The footnote div always is displayed directly underneath the exponent (the number within the <sup> tags). However, in Safari, some and only some footnotes are displayed a bit too high, so that the exponent number is covered by the footnote div. In this case, the browser doesn't recognize the onmouseout event anymore and the footnote remains displayed for all time.

This is my HTML Code:

<div class="entry"><b>1:</b>Some Text<sup><a href="#" id="exponent1" class="exponent" onmouseover="javascript:footnoteOn(1)" onmouseout="javascript:footnoteOff(1)">1</a></sup>
<div id="footnote1" class="footnote">Text of the footnote</div>
</div>

This is the CSS:

.footnote {
display:none;
width:500px;
background-color:#FFFFFF;
background-image:url(../img/fn_bg.jpg);
background-repeat:repeat-x;
border:1px solid #999999;
padding:20px;
text-align:left;
}

and these are the JavaScript functions:

function footnoteOn(nr) {
fnName = "footnote" + nr;
document.getElementById(fnName).style.display = "block";      
document.getElementById(fnName).style.position = "absolute";
}

function footnoteOff(nr) {
fnName = "footnote" + nr;
document.getElementById(fnName).style.display="none";      
}

I could make it position:relative instead of absolute, then it works in Safari as well, but this would be my last option as I don't like it when the footnotes get displayed between the text entries instead of over it.
Any ideas on how to fix this?

Thanks,
maesk
0
maesk
Asked:
maesk
  • 3
  • 2
1 Solution
 
Eoin OSullivanConsultantCommented:
Put the onmouseout code into the footnote ... this will help it hide when you want it to

<div id="footnote1" class="footnote" onmouseout="javascript:footnoteOff(1)">Text of the footnote</div>

Add a margin-top tag to the footnote stylesheet to force it as far downwards as you wish  (I've inserted 20px)
.footnote {
display:none;
width:500px;
background-color:#FFFFFF;
background-image:url(../img/fn_bg.jpg);
background-repeat:repeat-x;
border:1px solid #999999;
padding:20px;
margin-top:20px;
text-align:left;
}
0
 
maeskAuthor Commented:
Hi eoinosullivan
Thank you for your suggestions! Let's look at the two suggestions separately:
The CSS suggestion (adding a margin-top of 20px):
I tried that already before but it's not what I want, because it doesn't look good, I really want the footnote to display directly underneath the exponent number. Also, Safari sometimes moves it up more than 20px so I would have to set at least 30px top-margin. I would only do this if there is no other solution and only if it can be done with a browser hack, so that it would only apply for Safari but not for the other browsers.

The HTML suggestion (to put the mouseover in the footnote div):
This seems a good idea. The problem is that the HTML code comes from a database and I can't, at this stage, regenerate the whole database. So I can't change the HTML. I should have mentioned this in my question, my fault, sorry!

Is there a solution by changing the JS code? I thought of something like "display:none" when scrolling or calling the footnoteOff() function automatically after a certain time with setTimeout(). For example in my footnoteOn() function I could add:
window.setTimeout('footnoteOff(nr)', 10000);
But I don't know what happens if during the 10 seconds the user hovers over another exponent number and the footnoteOn() function is called again with a different nr as argument. Also, this is only an emergency solution and if I have to use it I would want to use it only for Safari but I don't know how.
0
 
Eoin OSullivanConsultantCommented:
I'm not sure .. but this sample I created works fine

I am wondering if it has anything to do with some other CSS layout element interfering.
Unless you can send me the full source code or a URL where I can view the page I'm afraid I cannot find the error. The CSS and javascript you have provided are perfect.
Email if you want to the following address
exex [at] eoinosullivan [dot] com (replace with characters as required)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>untitled</title>
      <style type="text/css">
      .footnote {
      display:none;
      width:500px;
      background-color:#FFFFFF;
      background-image:url(../img/fn_bg.jpg);
      background-repeat:repeat-x;
      border:1px solid #999999;
      padding:20px;
      text-align:left;
      }
      </style>
      <script language="JavaScript" type="text/javascript">
      function footnoteOn(nr) {
      fnName = "footnote" + nr;
      document.getElementById(fnName).style.display = "block";      
      document.getElementById(fnName).style.position = "absolute";
      }

      function footnoteOff(nr) {
      fnName = "footnote" + nr;
      document.getElementById(fnName).style.display="none";      
      }
      </script>
</head>
<body>
      <div class="entry"><b>1:</b>Some Text with a longer paragraph<sup><a href="#" id="exponent1" class="exponent" onMouseOver="javascript:footnoteOn(1)" onMouseOut="javascript:footnoteOff(1)">1</a></sup>
      <div id="footnote1" class="footnote">Text of the footnote</div>
      </div>
      <div class="entry"><b>2:</b>Some Text<sup><a href="#" id="exponent1" class="exponent" onMouseOver="javascript:footnoteOn(2)" onMouseOut="javascript:footnoteOff(2)">2</a></sup>
      <div id="footnote2" class="footnote">Text of the footnote</div>
      </div>
      
</body>
</html>
0
 
maeskAuthor Commented:
I sent you the source code, thanks for taking the time to look into this!!
0
 
maeskAuthor Commented:
Thanks a lot for your help!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now