Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE z-index - dropdown menu falling behind slideshow in IE

    http://bit.ly/bYjxep

    see link above. we are trying to find a solution to get our submenus from our navigation to not fall behind the slideshow immediately below it. We have tried 20 different z-index combinations, and are frustrated! This is only happening in IE 6&7 of course. All other browsers are working properly. The page is validated and error-free.

    Anyone care to take a look at this and help me with this one?

    Code:
    #menu (line 101) {
    z-index: 5000;
    height: 40px;
    line-height: 40px;
    background-color: #000000;
    background-image: url("../images/menu_bg.gif");
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    }
    ul.tabs (line 33) {
    display: table;
    margin-top: 0pt;
    margin-right: 0pt;
    margin-bottom: 0pt;
    margin-left: 0pt;
    padding-top: 0pt;
    padding-right: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    position: relative;
    }
    
    #menu ul (line 109) {
    margin-top: 0pt;
    margin-right: auto;
    margin-bottom: 0pt;
    margin-left: auto;
    }
    
    ul.dropdown (line 61) {
    margin-top: 0pt;
    margin-right: 0pt;
    margin-bottom: 0pt;
    margin-left: 0pt;
    padding-top: 0pt;
    padding-right: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
    position: absolute;
    z-index: 999;
    top: 100%;
    width: 200px;
    display: none;
    left: 0pt;
    }
    
    #menu ul (line 109){
    margin-top: 0pt;
    margin-right: auto;
    margin-bottom: 0pt;
    margin-left: auto;
    }
    
    #menu ul.dropdown (line 146){
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    background-color: #777777;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    overflow-x: hidden;
    overflow-y: hidden;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333333;
    width: 290px;
    }
    
    
    
    
    
    And Now the Slideshow:
    #carousel {
    	width:1000px;
    	height:350px;
    	overflow:hidden;
    	padding: 0;
    	margin: 0;
    	position: relative;
    	z-index: 1;
    }
    #carousel ul {
    	width:4000px;
    	list-style:none;
    	padding: 0;
    	margin: 0;
    	position: relative;
    }

  • #2
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,979
    Thanks
    120
    Thanked 76 Times in 76 Posts
    tip:
    1.sometimes z-index works only if parent element allso has it (IE I think)
    2.try setting parent element position to relative or absolute.

    Lately I was thinking mybe I should handle all z-indexes on page server side.
    i.e. invent some max value and then set each next element one less than element before.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •