Javascript Drop Down Menu over Image Rotator

Question

Designer here, trying to code.

I am almost there! Trying to get a drop down menu from dynamic drive to work over an jQuery image rotator. Played with z-index. I can get the menu to work over the image rotation on all browsers except in IE compatibility mode, cannot click on the buttons in the rotator.

http://local495.bigrigmedia.com/

Any help would be greatly appreciated!

Answer 1

Always so much easier to get everything looking right in Photoshop eh? You can fix your overlap issue with 2 minor tweaks to the CSS:

styles.css

#top {
    position: relative;
    z-index: 2;
    height: 155px;

}

ddsmoothmenu.css

.ddsmoothmenu{
    position: relative;
    z-index: 2;
    /* remaining css */
}

homerotation.css

div#feature_list {
    position: relative;
    z-index: 1;
    /* remaining css */
}

I also noticed you had a lot of z-index: -100 sprinkled around your CSS. Those are also going to cause you trouble. I would suggest taking them all out and just using the above 2 changes.

What the above 2 rules do is establish the stacking order for the menu and image rotator in a way that all browsers (including our friend IE) understands.

The trick with IE when using z-index is to make sure all the elements you're trying to overlap are in the same stacking context. IE creates a new stacking context whenever you use relative, absolute or fixed position on an element. In our case above, we're setting the stacking order on the top most elements in the stacking context (i.e. the document), therefore it will be respected.

Edit

Added a z-index to the #top container as this is actually the <div> that's at the same level in the document as <div id="feature_list">.