Overlapping divs

[dexthageek]

I am having a problem on in IE (of course) with my css menu.

When a user scrolls over menu link and the drop down list appears it appears beneath any divs located below it.

You can see what I am talking about here:

http://dexthageek.com/samples/avp/2/portfolio

My CSS files are available here:

http://dexthageek.com/samples/avp/2/portfolio/css

I works great in FF. I have also tried setting z-index which does nothing at all.

Thanks for taking a look.
Mike

 

[BillyRayPreachersSon]

You need to ensure that both your "topMenu" div and your "inside" div are positioned - whether relatively or absolutely. It doesn't matter which - but they both need to have some sort of positioning other than the default "static".

Then, you need to give both a z-index, with the "topMenu" div having a higher one. I'd suggest using 10 and 20, or something similar.

This might cause a small shift in your elements, but if it cures the problem, I'm sure you can work on that.

The reason you've probably not had much success with z-index is understandable. In fact, many people do not understand the way it works. As I understand it, only sibling elements can affect each other vis-a-vis their z-indexes. So in your code, setting the z-indexes of the menus themselves wouldn't change their ordering with regards to the content, because they are not sibling elements.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[dexthageek]

Dan,

Awesome, thanks for the info, I will give it a try later.
I will let you know of the out come.

Thanks again.

Mike

 

[dexthageek]

Your suggestion worked perfect. It always seems like IE is the bad child when it comes to dealing with CSS.

Thanks your help was invaluable to this project.
Mike