BleepingComputer.com: z-index scrolling issue

Hey folks,

First off, let me describe the situation briefly:

I'm building a float-based layout with a kind of Q & A format. Part of it consists of a containing div inside which is a nested Question div. A second nested div within the containing div holds the answer. This is set to display: none. If the user hovers over the question, the answer div is activated by :hover and using z-index, both elements are displayed. A fairly typical CSS based 'dropdown panel' effect. So far so good.

The problem:

The z-index panel containing the Answer element sets up its own scroll bar if it crosses the limit (bottom) of the visible screen. You can scroll down the panel and the page behaves as you would expect i.e it all scrolls. But the moment you lose mouse focus on the panel and switch back to the main page, the screen jumps quite a few px, as if the main page scrolling and the panel scrolling are offset from one another. I really can't see a logical reason for this (all code validates and the margins/padding for elements within the container are pretty much identical - one stacks right on top of the other)

Has anyone dealt with this or something like it? Any thoughts would be useful.

Cheers

Jason

Have you got a link? Or perhaps show us what you have so far?

Hey KamakaZ,

Thanks for the speedy response and I realise my description wasn't exactly clear, but some of what's going on is pretty difficult to get across - as well as the above I had collapsiong margins on elements below the drop downs, which made it awesomely confusing.

It would be pretty pointless posting the code as much of it contains images etc that would have to be replicated to make it work. In any case, I found a 'brute force' solution that actually validates and works in IE and FF for once. Here's a rough description in case someone finds it useful:

The 'dropdown' consists of two main parts, a base layer<div> that is relatively positioned and a dropdown layer<div> that is absolutely positioned. The dropdown layer has two seperate states, display: none and a :hover state. Using it 'as is' will give you nightmares. To make it work I removed the floats, contained the entire dropdown in a third <div> and added an img tag exactly the same size as the background layer to that div. I then forced the margins of the dropdown over the img, isolating the dropdown from the rest of the page - no scroll problems, no margin collapse etc. The margin distortion is pretty extreme (depending on the size of the dropdown) but seems to be unaffected by screen resolution or other settings in any case. It's not pretty, but it works.