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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    120
    Thanks
    15
    Thanked 2 Times in 2 Posts

    z-index issue in IE7

    Hi, I have a dropdown menu which is not working well in IE7, the drop down menu appears behind the image slider, I have set the z-index to 10000 but still it doesn't work in IE7, it works perfect in all other browsers,

    below is my CSS code:

    Code:
    #product-rollover {
    	position: absolute;
    	left: 257px;
    	top: 0;
    	width: 366px;
    	min-height: 157px;
    	z-index:99999;
    	
    }
    #product-rollover ul {
    	overflow: visible;
    	list-style:none;
    }
    #product-rollover ul li {
    	position: static;
    	list-style:   none;
    	float:left;
    	z-index:10000;
    }
    
    #product-rollover ul li.onhover, #product-rollover ul li:hover  {
    	position:relative;
    	z-index:10002; 
    }
    Link to my website: http://bit.ly/d2iXw

    Would really appreciate if anyone can help. Thanks

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I wouldn't play with these high z-index values - they also accumulate on top of their parent container. I'm not sure of the precise layout of your page, but perhaps:
    Code:
    #product-rollover {
    	position: absolute;
    	left: 257px;
    	top: 0;
    	width: 366px;
    	min-height: 157px;
    	z-index:99999;    /* delete this line */
    	
    }
    #product-rollover ul {
    	overflow: visible;
    	list-style:none;
    }
    #product-rollover ul li {
    	position: static;
    	list-style:   none;
    	float:left;
    	z-index:10000;    /* perhaps just -5 (if it shouldn't display initially) */
    }
    
    #product-rollover ul li.onhover, #product-rollover ul li:hover  {
    	position:relative;
    	z-index:10002;    /* perhaps just 5 or 10 :) if you want it to sit above everything */
    }
    This may not, yet, solve the IE7 issue but it should allow you more control.

    Note: Perhaps IE7 can't count up to 99999!
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    muneeba9071 (05-06-2011)

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Posts
    120
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Fixed THANKS!


  •  

    Posting Permissions

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