Results 1 to 7 of 7

Thread: Z-Index, Ultimate Fade Slideshow, Scroller Code, Internet Explorer

  1. #1
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Z-Index, Ultimate Fade Slideshow, Scroller Code, Internet Explorer

    Hi,

    I've read several posts here and on other sites regarding adding a z-index to the #menu styles to correct the problem of the drop down menu appearing behind the Ultimate Fade-in Slideshow, on my site it is also appearing behind my text scroller on the right.

    I've tried adding it to all of my #nav (menu style name) but to know avail.

    The Wordpress theme I'm using has z-index noted as such:

    #nav li:hover ul, #nav li.sfhover ul {

    left: auto;
    z-index:100;

    I've tried raising the z-index to 1000 or 10000 and moving it to the #nav style and #nav li ul { per a suggestion I read on the Wordpress forum.

    Is there another solution? You can view my issue on Internet Explorer at http://www.astuterecorder.com.

    Thank you!
    Last edited by judylovesherdog; 01-11-2009 at 07:56 PM. Reason: Resolved

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    For z-index to work, the elements concerned have to be positioned. Adding position:relative; to the style of the elements you are giving z-index values should fix your problem. Here is a good tutorial that explains how z-index works:
    http://css-tricks.com/video-screencasts/40-how-z-index-works/

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    In a case like this, often all you need to do is simply put:

    Code:
    #nav, #nav * {
     position: relative;
     z-index: 10000;
    }
    before the other nav rules. In cases where that doesn't work, adding the !important directive:

    Code:
    #nav, #nav * {
     position: relative;
     z-index: 10000!important;
    }
    will sometimes do the trick.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Still not working

    Hi, Snooker and John,
    Thanks so much for your tips and for recommending the z-index video.

    I've tried both of your suggestions and neither work.

    Snooker, when I tried your suggestion, it shifted the entire nav bar.

    John when I tried yours, the dropdowns still appeared behind the dhtml files and when I hovered, it lowered the height of the box (so the white hover box was shorter than the original blue one).

    Here are some specific questions I have:

    If I incorporate the code you suggested, am I deleting the other references to position and z-index.

    For your reference, here is the current nav styling:

    /*- Nav / Dropdowns-*/

    #nav, #nav ul{

    padding: 0;

    float:left;

    list-style: none;


    }

    #nav {

    padding: 0;




    }

    #nav a {

    display: block;

    }

    #nav li {

    float: left;

    line-height:33px;

    }

    #nav li a:hover {

    background: none;

    }

    #nav li ul {

    position:absolute;

    width: 15em;

    left: -999em;

    padding-top:1px;



    }

    #nav li:hover ul, #nav li.sfhover ul {

    left: auto;
    z-index:100;


    }

    #nav li ul li {

    background: #FFFFFF url(images/bgr-box-trans.png) repeat-x top;

    border-bottom:1px dotted #dedbd1;

    border-left:1px solid #dedbd1;

    border-right:1px solid #ffffff;

    line-height:28px;

    width:15em;

    }

    #nav li:hover, #nav li.hover {

    position: static;

    }

    #nav li ul ul {

    margin: -29px 0 0 15em;

    }

    #nav li:hover ul ul, #nav li.sfhover ul ul {

    left: -999em;

    }

    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {

    left: auto;

    }

    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

    left: -999em;

    }

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

    left: auto;

    }

    Thank you again for your help.
    http://www.astuterecorder.com (problem seen on IE only)

  5. #5
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Doing what I told you works just fine:
    Code:
    <div id="topmenu" style="position:relative; z-index:10;">
    You were probably targeting the wrong element. Remove the code John wrote and add this instead and it should fix your problem.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  6. The Following User Says Thank You to Snookerman For This Useful Post:

    judylovesherdog (01-11-2009)

  7. #6
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default It worked! Thanks, Snookerman.

    Hi, Snookerman,

    I did precisely what you suggested and it worked. Thank you so much!

  8. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You're welcome, glad to help! You can go to your first post in this thread, click then click Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

    Good luck with the site!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Tags for this Thread

Bookmarks

Posting Permissions

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