Book help: Relative causing Firefox to jump to top

HTML & CSS
1

One of our books, Simply Javascript, seems to have some CSS compatibility trouble when creating rich tooltips.

I’m posting this in the CSS forum in case anyone here can find a solution to be put forward to the book author.

Page 132 of the book is where the Rich Tooltips example can be found, and page 138 is where we’re told to apply a CSS fix for Safari and Opera.


// Fix for Safari2/Opera9 repaint issue
document.documentElement.style.position = "relative";

The problem, is that when using Firefox in situations where you have scrolled down the page, setting this position to relative forces the web browser to scroll to the top of the page, and you lose the fancy tooltip.

The issue has been diagnosed in the JavaScript forum at:

While it’s possible to fix this problem using browser sniffing, it’s better if that sort of technique was not required.

2

At Event Apart, they were recommending a new JS library called Modernizr for this kind of thing. It uses feature sensing rather than strict browser sniffing, but I haven’t used it. Would something like that be workable, or is it being oversold?

3

Object detection is much better than browser sniffing. Sadly I don’t know enough about the Safari or Opera bugs, or the darker sides of CSS.

4

I don’t think you’re missing anything. I suspect that the tooltip code just wasn’t tested in a scrolled page situation.

5

Hi Paul,

What has me confused is that the RP fix for Opera-9 doesn’t even seem to be working correctly. If I scroll the page any the tooltip loses it’s positioning to the anchor. Or am I missing something?

http://www.css-lab.com/test/tooltip-bug/test.html

6

Okay, just wanted to check.

If I were you I would remove the fix altogether since it works fine in Opera-10 without it. That gets FF working as well.

Seeing how Safari-2 is a long gone it just looks like a counterproductive fix for this day and age.

It’s working fine in Safari-4+ and Chrome too.

7

Thanks Ray - I’ll copy that advice over to the original thread.