Stylesheets - Disappearing <div> with Opera!

Author

Disappearing <div> with Opera!

Mark Tranchant

2004-06-23, 12:19 pm

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.

Els

2004-06-23, 12:19 pm

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 -