Disappearing <div> with Opera!

Argh. I've no idea where to start with this one. Take a look at:

http://tranchant.plus.com/notes/cable-wrap

The problem occurs on all pages, but you need a fairly long page to
demonstrate it.

I've recently added dynamically-generated next/prev/up/start links, and
a few "common" links to the header bar. Works fine in Firefox (fixed
header) and IE (non-fixed header).

Opera (7.51) also works fine, until you scroll down the page. Shortly
after the <h1> title goes "under" the header, the top-right links
disappear. It's not like they're gradually obscured - there is a degree
of scrolling at which they disappear.

Any suggestions? CSS is at:

http://tranchant.plus.com/css/screen

The header bar is #header, and the links are in #fn.

--
Mark.

Mark Tranchant wrote:

Argh. I've no idea where to start with this one. Take a
look at:

http://tranchant.plus.com/notes/cable-wrap

The problem occurs on all pages, but you need a fairly long
page to demonstrate it.

I've recently added dynamically-generated
next/prev/up/start links, and a few "common" links to the
header bar. Works fine in Firefox (fixed header) and IE
(non-fixed header).

Opera (7.51) also works fine, until you scroll down the
page. Shortly after the <h1> title goes "under" the header,
the top-right links disappear. It's not like they're
gradually obscured - there is a degree of scrolling at
which they disappear.

Any suggestions? CSS is at:

http://tranchant.plus.com/css/screen

The header bar is #header, and the links are in #fn.

Don't know why, but if you change position:absolute to
relative in #fn, (and adjust the bottom value), the problem
disappears.

Without changing anything first, if you would set bottom:-some
value on the #fn, it takes longer for the links to disappear.
As if it's mirrored somewhere.
Like: if you set bottom:-10em; the links don't disappear until
the content is scrolled up for about 10ems worth of height.
When set -20em, this distance doubles.

Can't figure out why though :-(

I've noticed before that Opera doesn't respond very well to
position:absolute inside another element with
position:absolute. Although in your case, if I change the
position to relative on the #header instead of on the #fn, the
problem still doesn't disappear.

I noticed that in Opera there also appears a bit of space
between #header and #content, when dragging the bottom of the
window down. It jumps back in place after hovering any link in
the #content though.

I used to think Opera was right and IE was wrong, but lately
I'm seeing rather strange things happening in Opera as well.
An example I encountered the other day:
http://locusmeus.com/test/opera.html

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -