IE7 problem - drop down menu falls behind slideshow

HTML & CSS
1

I am kinda new to web-development, but had given it a try for my husband’s business. here it is http://www.greenmanlandscape.com/index.html
so my problem is in subj.
Problem appears only in IE7 (but I did not try IE6 - donknow if anyone uses it anymore)

Would really appreciate any help.

:shifty:

2

Hi vasilina, Welcome to SitePoint :slight_smile:

It’s a z-index bug in IE6/7

You have positioned elements in your nivo slider div and IE7 is incorrectly setting a default z-index:0 on them instead of z-index:auto;

To fix it you need to manually set a higher z-index on the dropdown menu’s parent which is .menu, In order to do that it must be positioned.

Add these to your menu rules :wink:

.menu {
position:relative;
z-index:99;
}
3

great!! that helped! thank you so much!!
I still have my menu in IE7 kinda jumpy. not very smooth. is that fixable?

4

IE7 kinda jumpy… is that fixable?

I think I noticed that too, not sure what it is but I’ll take another look

5

really appreciate it!

6

Ok, it looks like IE7 just needs a width set on the sub UL to remove the jumpiness.

You can also remove the float and z-index as they are not doing anything. The float gets overpowered by the absolute positioning and we just set z-index on the .menu div

I also reworked the order of things a little so you get the box properties first then the BG colors and borders at the end. It doesn’t effect anything but it keeps things organized a bit. :wink:

By the way, that 158px width was derived from your anchor width + it’s side paddings.

menu.css

ul.toplink li ul.sublink {
    position: absolute; /*--Important - Keeps sublink from affecting main navigation flow--*/  
    left: 0; 
    top: 35px;
    [COLOR=Blue]width:158px;[/COLOR]
    display: none;  
    margin: 0; 
    padding: 0;
    list-style: none;    
    border: 1px solid #7b8966;  
    border-bottom: 0px;
    background: #191919;
[COLOR=Red]    /*z-index:100; /*--Places the navigation bar above my slideshow--*/
    /*float: left;*/  [/COLOR]
}
7

oh!! it works!!! it sounds soo easy when you talk about it!!
thank-you! thank-you!!

8

it’s me again. actually after all, I have still found out that in IE7 my menu is not sliding down in full width: only half of the sublink group slides down, then the full width shows.

the funny thing is that third level drops down just fine :shifty:
this is only IE7 problem.

9

Try adding the width to the ul.

e.g.


ul.toplink li ul.sublink {
    list-style: none;
    position: absolute; /*--Important - Keeps sublink from affecting main navigation flow--*/
    left: 0;
    top: 35px;
    z-index:100; /*--Places the navigation bar above my slideshow--*/
    background: #191919;
    margin: 0;
    padding: 0;
    display: none;
    border: 1px solid #7b8966;
    border-bottom: 0px;
    [B]width:157px;[/B]
}