position call and z-index wierdness in IE

[buttercup]

I am working on a css-based website which has a navigation row running across the top of the page. This consists of a background gif on the left side and a set of drop downs next to that.

Of course this all works fine in FireFox but not in IE.

What happens in IE is that if I use a postition call so that the background image shows up, it sends all the dropdowns underneath the other elements on the page regardless of the z-index associated with them.

Has anyone else ever encountered this problem of having a conflict between revealing a background image and having dropdown elements fall on the top level of the other page elements?

Thank you very much.

[al-do]

maybe a link to an example might help :D

[buttercup]

the site is on a protected server, so i can't send you there. maybe a couple of screen shots will help.

this is what happens when I write it this way:
#navigation {background-image:url(../images/grey_decor.gif); background-repeat:no-repeat;}

the grey image to the left of the navigation does not show up, but the dropdowns fall over the other page elements as they should.
http://medschool.ucsf.edu/preview/caps/screens/ok.jpg

this is what happens when I write it this way:
#navigation {background-image:url(../images/grey_decor.gif); background-repeat:no-repeat; position:absolute;}


as you can see, the grey image to the left of the navigation shows up, but the dropdowns fall below the other element.
http://medschool.ucsf.edu/preview/caps/screens/bug.jpg

[chrishirst]

don't get your problem,

You are changing from position:absolute to not defining a position (relative by default). Of course things will move around.
Absolute removes an element from the document flow so it no longer has any effect on the other elements in the parent container.

[buttercup]

so, how would you suggest writing this so that the dark grey background gif to the left of the drop downs show up AND the drop downs fall over the other page element? I have already tried using the z-index and it doesn't make any difference.

thank you.

[thatguy]

If you could put the css elements in that you're using, in here, with a bit of the xhtml so we can see what you are doing it would be easier to advise.

I'm still unsure how you've coded it becuase different people do things in different ways with css, depends what you're used to.

Dave

[chrishirst]

We do need to see the code for the whole page (CSS & HTML). So we can tell how everything is going to flow with each other.

The way I code CSS dropdowns (http://www.candsdesign.co.uk/articles/dhtml/menus/drop-down/) is to make the parent element position:relative, then on the child elements (the drops) use position:absolute & a higher z-index.
This will maintain the document flow but let the dropdown float over the other elements.

As your pages are on a server we cannot get to, why not set up a freebie account somewhere and upload the bits we need to look at to there?