Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Drop down div problem in IE

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #167372
    paa1605
    Participant

    Hi folks,

    I’m just moving my new site from the testing server to the live server for the first time and am checking it in all browsers.

    For some reason in IE7 the drop down menu on the ‘services’ tab is hidden behind the main banners just below. This only happens in IE and on the home page.

    Does anyone know why this is happening and can anyone help in fixing it?

    The domain is http://www.bridgewaterhomecare.co.uk/

    Many thanks.

    #167374
    Paulie_D
    Member

    Sounds like a Z-index problem.

    Personally, I don’t support below IE8 and am on the verge of dropping IE8.

    #167376
    paa1605
    Participant

    Hi, thanks for the reply.

    Yeah it definitely sounds like a z-index problem but i just can’t seem to fix it. I’ve tried adding a z-index on the drop down div higher than the content div below but it hasn’t helped.

    #167377
    Paulie_D
    Member
    #167378
    Atelierbram
    Participant

    I would recommend swapping declarations for the hover to the hidden link:

    #nav-container #drop-down li div {
     visibility: hidden;
     position: absolute;
     top: 21px;
     background: #FDFDFD url('http://www.bridgewaterhomecare.co.uk/wp-  content/themes/bridge/images/nav-bg.gif') repeat-x bottom;
     padding: 6px;
     border-left: #0169B3 1px solid;
     border-right: #0169B3 1px solid;
     border-bottom: #0169B3 1px solid;
     -moz-border-radius-bottomright: 10px 10px;
     -moz-border-radius-bottomleft: 10px 10px;
     border-bottom-right-radius: 10px 10px;
     border-bottom-left-radius: 10px 10px;
     font-size: 14px;
     width: 220px;
    }
    #nav-container #drop-down li:hover div {
     visibility: visible;
    }
    

    Also z-index needs to be ‘in scope’, but I don’t know if that’s the issue here.

    #167379
    paa1605
    Participant

    I tried swapping the declarations like Atelierbram suggested but this did not work. The drop down div did not show at all when you hovered over the services tab.

    Paulie D, where should that jquery code be placed? And what would be the target element that goes in the selector?

    Sorry for the questions, my css knowledge is fairly limited.

    #167380
    Paulie_D
    Member

    Off hand it would probably be

    $(function() {
           var zIndexNumber = 1000;
           // Put your target element(s) in the selector below!
           $("#dropdown li").each(function() {
                   $(this).css('zIndex', zIndexNumber);
                   zIndexNumber -= 10;
           });
    });
    

    and it would either go between <script> tags with your other js scrips.

    If this is WP (which I suspect) then there may be alternative places that this should go.

    Frankly, the structure of the dropdowns is quite odd…divs in li and ul in tables in divs

    #167386
    paa1605
    Participant

    I fixed it!

    Gave the header div a z-index higher than that of the content blocking div and it worked. The article below was quite useful..

    http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/

    Thanks for all your help guys, much appreciated.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.