IE 7 Suckerfish drop down menu fix

Hey all,

I am new here, and I have been searching the the answer to my issues for hours, and im at my wits end. I am having the same issues with the z index on drop down menus. I have tried a bunch of diffrent fixes and no luck.

My working file is at http://www.cyberexmarketing.com/transtech/index.htm


Any help would be greatly appreciated. Thanks!
The css for the nav bar is below:


#menuwrapper {
position:relative;
background-image: url(Graphics/layout/menu/menu_tail.gif);
background-repeat: repeat-x;
top: 0px;
width: 800px;



}

#menuwrapper div {
background: url(Graphics/layout/menu/menu_left_bg.gif) no-repeat 0% 0%;
height: 44px;
}

#menuwrapper div div {
background: url(Graphics/layout/menu/menu_right_bg.gif) no-repeat 100% 0%;
height: 44px;



}
#nav li:hover, #nav li.hover {
display:block;
}

#nav, #nav ul {
display: block;
padding: 0;
margin: 0;
list-style: none;
color:#FFFFFF;
position: relative;
}
#nav a {
display: block;
width: 110px;
color:#FFFFFF;
text-decoration: none;
}
#nav li {

float: left;
width: 110px;

}
#nav li a.trigger{

text-align: center;
width: 110px;
padding-top: 20px;

}
#nav li:hover ul {
display: block;
left: auto;
float: left;
z-index:2
}
#nav li:hover ul, #nav li.sfhover ul {
display: block;
left: auto;
z-index: 2;
visibility: visible;


}
#nav ul li a:hover{
display:block;
text-decoration: underline;}
#nav li ul {

width: 110px;
left: -999em;
background-color:#FFffff;
display: block;




}

#nav li ul a{
display: block;
line-height: normal;
color:#0000FF;
padding: 3px 50px 3px 5px;

}
#nav li ul a:hover {
display: block;
width: auto;

}
.trigger-menu-act {
background: url(Graphics/layout/menu/menu_act.gif) repeat-x 0% 0%;
height:: 46px;
text-align: center;
width: 110px;
padding-top: 20px;
padding-bottom: 5px;
text-decoration: underline;
}

 

In FF I see other problems, things are not properly positioned.

Why don´t you start with having a look at the html errors the validator shows and the css errors and take it from there?

 

Yeah, I noticed today that the links do not work in FF. This is becoming a major headache. Any advice would be helpful

 

Check and fix the errors you'll see when you click the links I posted.

 

Jeremy5431 - You try show suckerfish menu above flash. It is not good idea in my opinion. On main page menu don't works, but another subpage works fine. Try help on htmldog com

 

Good lord, yes, dropdowns don't go over Flash.

Ive seen two instances where a dropdown COULD sit over Flash, and both were nasty. (and one still didn't work in Firefox on Linux)

One was using a css dropdown with some german thing called dickerfish? or whatever... a sort of Javascript extra for the suckerfish menus. Except on Linux, I think due to either the Flash plugin for Linux or due to how FF on linux dealt with JS, it did not work (the dropdown showed up behind the Flash).

The other solution was mostly for IE, who always always sets Flash on a Higher Plain (do I sound like a hippy yet?) and the solution is something rather nasty, known as
the iFrame shim

google that and decide if you want to do all that.

Anyway what can help pull a Flash file "into" a page is setting wmode or windowmode to opaque, or transparent if it's supposed to have transparency (I don't have Flash so I can't see it now anyway). wmode transparent has more costs, so try opaque. This alone might help.

Also you should be aware of an IE bug regarding z-index: IE is probably ignoring your z-index on the subs anyway. You should move the z-index declaration to the parent (likely #menuwrapper in this case since it's the one who's position: relative).
source: http://annevankesteren.nl/2005/06/z-index