View Full Version : stacking order problem

11-03-2008, 04:12 PM
Dear all,

I have a question about stacking order. I'm using a multi-level-menu library, javascript that converts an <ul> tag into a nice menu.
However, the sub-menus, while hovering with the mouse, fall below an image I have in my page. I'm really lost googling around about z-index and stuff, so I hope somebody has a good suggestion for me.

First I have the menu in my source, it is like this:
<body> <div id=topmenu> <ul> <li> <ul z-index: 100 position: absolute> <li> <a> <span>

Later, I have the image, like this:
<body><form><table><tbody><tr><td><table><tbody><tr><td><div id="imgdiv"><img id="theimg" position: static>

Now, I ALWAYS want the topmenu on top of everything else.
In Firefox (version 3) it works like this, perfectly.
However, in both IE6 and IE7 the menu is behind the "theimg" image (and behind some other things in my page).

Does anybody know how to fix this?
The position: static is added by a JQuery plugin to my img (to be able to resize the image).


11-03-2008, 04:24 PM
Read "Why tables for layout is stupid? (http://www.hotdesign.com/seybold/)" first, then Validate your code (http://validator.w3.org/) and fix the errors in your markup, if any.

PS: welcome to CF.

11-03-2008, 04:24 PM
Some code would be useful. But generally z-index:?; is what controls the layers.

Google z-index.

This is one result. (http://www.w3schools.com/Css/pr_pos_z-index.asp)