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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE Z-Index Problem

    Thanks for looking at this. Its driving me nuts. To summarize, check out this link:

    Click here

    The calendar div, despite having a z-index of 999, is positioned under the menu div that has a z-index of 10. Looks fine in FireFox but not IE. The menu div has a black border for emphasis.

    Link to live page is here (validated W3C)

    I feel like I'm stupid that I can't figure this out so your expert advice is appreciated.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Try taking position:relative; off the menu:

    Code:
    #menu  {
    	height: 23px;
    	padding-left: 155px;
    	padding-top: 29px;
    	background: url(../images/common/menu_bkg_bar.gif) no-repeat 200px 39px;
    	z-index: 10;
    	border: 2px solid #000000;
    }
    FYI, the z-index is not going to apply to your menu, since it's not absolutely positioned, but still in the document flow:

    Note: Z-index only works on elements that have been positioned (eg position:absolute)!
    If removing the position:relative; doesn't work, your last resort might be absolutely positioning the menu:

    Code:
    #menu  {
            position:absolute;
    	height: 23px;
    	left: 155px;
    	top: 29px; /* adjust pixel values accordingly */
    	background: url(../images/common/menu_bkg_bar.gif) no-repeat 200px 39px;
    	z-index: 10;
    	border: 2px solid #000000;
    }
    Last edited by BoldUlysses; 07-21-2008 at 03:40 PM.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    mrjasonsweet (07-21-2008)

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Matt,

    Thanks for giving this a look over. I tried both suggestions but no joy.

    Now I'm in the process of commenting out each elements and seeing where things change. I did have a conflicting element which, after removing, has improved things a bit. Now the calendar just has a problem with the "subMenu" elements. So, at least I'm getting closer.

    Thanks very much again.

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Do you think you could remove that border? It is driving me crazy and does not fit it. There is really no purpose to it.

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The menu div has a black border for emphasis.
    I added the border only to troubleshoot the issue.


  •  

    Posting Permissions

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