Tried “everything”. My menu keeps going behind my featured slider in IE6. (CSS z-index?)

Tried everything, my dropdown menu keeps going behind my slider in IE6. See here:

http://www.vectorsig.com

Read More

View it in IE6, and the menu goes behind the slider. (That’s a mock-up site for testing purposes, nothing important on there.)

I tried putting the slider at z-index: -1, position: relative…nothing, tried fiddling with the menu. Nothing.

I’m at the point where I’m just sitting here, smashing keys, staring at the screen. ANY help would be much appreciated.


Here is some background info:
It’s running on wordpress, with the theme: News. (http://devpress.com/themes/news/)

The slider is “Simple Nivo Slider”, a WP plugin: (http://wordpress.org/extend/plugins/simple-nivo-slider/ )

EDIT: SOLVED (the forum wouldn’t let me Answer my own post.

I used this.

.menu{
    position: relative;
    z-index: 5;
}

#container{
    position: relative;
}

Related posts

Leave a Reply

3 comments

  1. So I notice that the anchor tags in your slider have positive z-index values (5, 6, 8, etc.). Have you tried giving your menu elements a generously high z-index? Also, just a shot in the dark here, you might try giving both your menu and your slider elements zoom: 1. This won’t affect the magnification of your elements, but it will give them the hasLayout property, which has been known to fix little quirks like these in IE.

  2. I would’t use negative z-index in any circumstance. It will prevent some events from being fired on the element. Always use positive z-index for the element which needs to be in front.

  3. check adding this at the top of your header.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    

    otherwise try adding this one in your header

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />