[Solved] Drop down div problem in IE

[paa1605]

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.

[Paulie_D]

Sounds like a Z-index problem.

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

[paa1605]

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.

[Paulie_D]

https://css-tricks.com/snippets/jquery/fixing-ie-z-index/

[Atelierbram]

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.

[paa1605]

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.

[Paulie_D]

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

[paa1605]

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.

[Author]

Posts