Dropdown menu z-index & IE7

HTML & CSS
1

I am building a new site (with Joomla). It has a dropdown (Suckerfish) menu. This works fine with firefox, and on all pages but the home page looks fine with IE7. Initially on the home page with IE the drop down would dissappear behind the carousel below it. To remedy that I added

div.slideshow {
	position:relative;
z-index:-1;
}

This solved the drop down problem but now you cannot use the links on the slides.

I have tried putting the z-index on various other divs but this either results in all the content below the header dissapearing or links not being clickable . You can see the test site here

http://www.biencreative.com.au/testarea/AusTechnion/

[Only the students menu item has drop down. ]

Any suggestions appreciated.

2

Rather than the z-index method you used, try this:

#bc-headerwrap {
  position: relative;
  z-index: 20;
}

this fixes a z-index problem with IE 7 and under.

3

Thanks it worked.

trying to work out why…

You give the surrounding div a higher z-index (20) then that its going to drop down over (none) even though the drop down already had a z-index of 99

This works, while giving the div to be dropped over a negative z-index just hid it .

so… it is better to increase a z-index than give something else a negative one?

4

The default z-index value for positioned elements is auto, except for IE where the z-index defaults to 0, so using negative z-indexes isn’t a safe method to use.

As a consequence of how IE treats z-index, the children of a containing block’s element are positioned behind its parent, thus making it invisible in IE.

5

A nice explanation of this is offered by Paul O’Brien, if you want more details: