Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

z-index scrolling issue


  • Please log in to reply
2 replies to this topic

#1 webrat

webrat

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:02:43 AM

Posted 20 May 2009 - 05:18 AM

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

BC AdBot (Login to Remove)

 


#2 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:12:43 PM

Posted 20 May 2009 - 09:13 AM

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

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.


#3 webrat

webrat
  • Topic Starter

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:02:43 AM

Posted 21 May 2009 - 09:36 AM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users