CODEWITHSUNDEEP
htmlcssinternet-explorerdrop-down-menu
Art
Art

Reputation: 17

Dropdown Menu Not working in Firefox/Chrome

So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div.

Website: http://www.stingrayimages.ca/

With Z-index: it breaks in IE Without it it fails in other browsers.

Anyway to fix the dropdown menu without adding z-index to the head div?

#head {
    position:relative;
    height: 140px;
    width: 100%;
    background: #FFF;
    filter:alpha(opacity=93);
    padding-top:20px;
    /* CSS3 standard */
    opacity:0.93;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
}

Upvotes: 0

Views: 3570

Answers (3)

Jeff S
Jeff S

Reputation: 7484

You need to lessen the opacity. The drop down is washing out when it is displayed over the images and that is making it look like it is behind the pictures.

Also, IE9 shows the same problem as Chrome and FireFox 4.

Upvotes: 1

agmcleod
agmcleod

Reputation: 13621

One thing you can do is put the z-index back and look up the IE fix for it.

Another thing to consider is the rendering order and tree structure of your html, as that influences what sits on top. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ this article explains it far better than I can.

If you are able to link an example of the site you're working on, it might make it easier for us to give a more specific answer.

Upvotes: 0

Basic
Basic

Reputation: 1866

Use z-index, just apply a higher z-index to the drop down elements that sit on top, or you could apply - z-index values to all content behind, either way works.

Upvotes: 0

Related Questions