Drop down menus on IE

[crofter]

Got a problem on IE using very simple CSS based drop dowm menus.

The drop down disappears behind page contents but works perfectly on Firefox etc


www.sasproducts.com/acatalogtest/testindex.html

Any help would be appreciated

[jont]

Have you tried using a z-index statement to bring it to the top?

[NormanRouxel]

Would it be FORM fields that it's disappearing behind? Or Flash objects? These sort of widgets aren't really part of the page and can often obscure dynamic content.

[jont]

Just looking at the site again there is something amiss with the a:hover under IE with the font underlining and changing in style.

I would be tempted to give the <div> they all sit into an identifier eg <div id="navbar"> and set the css accordingly

[crofter]

Norman, there are no flash objects and and the only form would that normally contained in the Netquotevar:BrochureBody

[crofter]

Jont, I have put the navbar into a div id="navbar" and set the z-index to one for .navbar and set the z-index to zero for the body. Obviously I am not doing it correctly as there appears to be no change. Here is a copy of the actinic css

/*cope with inheritance bugs*/
body, table, th, td{
color:NETQUOTEVAR:FGCOLORCSS;
font-size: x-small;

font-family:CUSTOMVAR:ACTCSSFONTFAMILY;
z-index: 0;
}

/*body specific*/
body{
NETQUOTEVAR:BODYBACKGROUND;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}

form{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}

a:link{
color:NETQUOTEVAR:LINKCOLORCSS;
font-size:12px;
text-decoration:none;
}

a:visited{
color:NETQUOTEVAR:VLINKCOLORCSS;
font-size:12px;
text-decoration:none;
}

a:hover{
color:NETQUOTEVAR:HLINKCOLORCSS;
font-size:12px;
text-decoration:underline;
}

a:active{
color:NETQUOTEVAR:ALINKCOLORCSS;
font-size:12px;
text-decoration:none;
}

li{
color:NETQUOTEVAR:FGCOLORCSS;
list-style-type:square;
}

ol{
color:NETQUOTEVAR:FGCOLORCSS;
}

ul{
color:NETQUOTEVAR:FGCOLORCSS;
list-style-type:square;
}

H1, H2, H3, H4, H5, H6 {
font-family:CUSTOMVAR:ACTCSSFONTFAMILY;
}

SELECT {
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.actCHECKOUTEM {background-color:NETQUOTEVAR:CHECKOUTEMCSS;}
.actCHECKOUTBG {background-color:NETQUOTEVAR:CHECKOUTBGCSS;}

.actlarger{
font-size: larger;
color:NETQUOTEVAR:FGCOLORCSS;
}

.actsmaller{
font-size: smaller;
color:NETQUOTEVAR:FGCOLORCSS;
}

.actxxsmall{font-size:xx-small;color:NETQUOTEVAR:FGCOLORCSS;}
.actxsmall{
font-size:x-small;
color:NETQUOTEVAR:FGCOLORCSS;
}
.actsmall{font-size:small;color:NETQUOTEVAR:FGCOLORCSS;}
.actregular{font-size:medium;color:NETQUOTEVAR:FGCOLORCSS;}
.actlarge{font-size:large;color:NETQUOTEVAR:FGCOLORCSS;}
.actxlarge{font-size:x-large;color:NETQUOTEVAR:FGCOLORCSS;}
.actxxlarge{font-size:xx-large;color:NETQUOTEVAR:FGCOLORCSS;}

.actwarningcolor{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actrequiredcolor{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actsearchhighlightcolor{color:NETQUOTEVAR:SEARCHHIGHLIGHTCOLORCSS;}
.actrequired{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actwarning{font-size:x-large;color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actwelcome{font-size:medium;color:NETQUOTEVAR:FGCOLORCSS;}

.actlogotext {font-family:CUSTOMVAR:ACTCSSFONTFAMILY; font-size: x-small; color: #D9090E; font-style: normal; font-weight: bold; text-align: center}
.actlogout{font-size:x-small;color:NETQUOTEVAR:LINKCOLORCSS;}.trade {
background-color: #CCFFFF;
}
h1 {
font-size: small;
font-weight: bold;
color: #FF0000;
}
.navbar {
z-index: 1;
}


There is and additional in line stylesheet for the navbar as follows


<style type="text/css">
.menuActuator a {
color:#000000;
font-weight:normal;
font-size:11px;
font-family:arial;
text-decoration: none;
}
.menu {
font-family:verdana;
text-decoration: none;
color:#999999;
font-size:10px;
background-color:#CCCCFF;
layer-background-color:#ffffff;
}
td div {
position:relative;
text-indent: 5px;
text-align: left;
z-index: 1;
}
</style>

I made the TD DIV z-index 1 as well

[Kermy]

Like Jont says it could be a problem with browsers and z-index. Try removing the line

z-index: auto;

from the .menu class in your css?

EDIT: Beat me to it with your last post

[jont]

Once you get it sorted I would recheck the CSS as it could lead to problems especially combining the div "navbar" with the .menubar etc statements. You should use #navbar for the main <div> CSS and then place the other statements inside that.

For ref my CSS menu is set at z-index: 10; to make sure it is always on top

[crofter]

Sorry Jont - I should learn more about layers..

How do I place, and which statements, should I put inside #navbar??

[jont]

This is now working in FF when applying my CSS to the live page (unable to check in IE)

        .menuActuator a {
	color:#000000;
        z-index: 10;
	font-weight:normal;
	font-size:11px;
	font-family:arial;
	text-decoration: none;
	}

	.menu {
	font-family:verdana;
	text-decoration: none;
	color:#999999;
	font-size:10px;
	background-color:#CCCCFF;
	layer-background-color:#ffffff;
	}

        td div {
	position:relative;
	text-indent: 5px;
	text-align: left;
        }

note removal of z-index from td div and inclusion of z-index: 10; into .menuActuator.

You also need to add the alternatives into the font-family eg

font-family: verdana, arial, tahoma, sans-serif;

You need also to specify the 4 states for the mouse over in .menuActuator ie:

.menuActuator a:link
.menuActuator a:visited
.menuActuator a:hover
.menuActuator a:active

to prevent the fonts changing during mouseover (under IE)

HTH

[jont]

Hi Bruce,

see you have implemented the above and it is working in both IE and Firefox.

You need to add in the font-family, color and font-size into the new .menuActuator a:link (et al) statements you have created.. this will then cure the change in text under IE

[crofter]

Hi Jont
As you can see it all works except that the slide out menus don't stay out in IE.
The only thing I can think of is that the javascript is not correctly set out for IE but it is beyond my level of incompetence. Any ideas, please