Help with a CSS / script menu

I am working on a site that utilizes a menu with pullout script and CSS formating.
IN firefox the page looks great but in IE the menu shifts the last item to the right and when you mouse over the menu it creates a gap in the header.
Any Help would be greatly appreciated, I am a newbie to the CSS world
the HTML
<script>

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<link href="../../menu.css" rel="stylesheet" type="text/css">
<link href="../../text.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<p> </p>
<p> </p>
<TABLE WIDTH=800 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<div align="center"><IMG SRC="images/head003_01.jpg" WIDTH=149 HEIGHT=116 ALT=""></div></TD>
<TD>
<IMG SRC="images/head003_02.jpg" WIDTH=651 HEIGHT=116 ALT=""></TD>
</TR>
<TR>
<TD>
<div align="center"><IMG SRC="images/head003_03.jpg" WIDTH=149 HEIGHT=37 ALT=""></div></TD>
<TD>
<IMG SRC="images/head003_04.jpg" ALT="" WIDTH=651 HEIGHT=37 border="0" usemap="#Map"></TD>
</TR>
</tr>
<tr>
<td align="left" valign="top" background="/images/background.gif" bgcolor="#999999"><font color="#999999"><br>
</font><font color="#99CCFF"><div id="menu"><font color="#999999">

<ul>

<li><a href="thermaflex.html">Thermaflex</a></li>

<li><a href="product.html">Products</a></li>

<ul>

<li><a href="frame.html">Frame Styles</a></li>

<li><a href="belt.html">Belt Types</a></li>

<li><a href="accs.html">Accesories</a></li>

<li><a href="config.html">Design Configurations</a></li>

</ul>

</li>

<li><a href="material.html">Materials</a>

<ul>

<li><a href="material.html#neoprene">EL200NP</a></li>

<li><a href="material.html#epdm">EL300EP</a></li>

<li><a href="material.html#viton">EL400VI</a></li>

<li><a href="material.html#teflon">FPR500TA</a></li>

<li><a href="material.html#comps">Composites</a></li>

</ul>

</li>

<li><a href="apps.html">Applications</a>

<ul>

</ul>

</li>

<li><a href="special.html">Special Applications</a>

</li>
</ul>

<li><a href="industry.html">Industries</a>

</li>
</ul>

The CSS

#menu
{
vertical-align:top;
background-color:#339999;
width: 149px;
text-align: left;
font-size: 14px;
font-family: helvetica, arial, geneva, sans-serif;
display:block;
float:left;
clear:left;
margin-bottom:50px;
color: #666666;

}

#menu a, #menu h2, #menu h1, #menu h3, #menu h4{
color:#fff;
background-color:#339999;
font: bold 14px arial, helvetica, sans-serif;
min-height:22px;
text-indent:5px;
text-bottom:5px;
display:block;
margin: 0;
border-top:5px hidden;
width: 149px;
text-align: left;
padding: 0px;
border-bottom:1px solid #666666;/* adds bottom border */
vertical-align:top;
}

#menu h2 a, #menu h2 a:visited {
color: #FFFFFF;
background: #fff;
padding-left: 0px;
border-bottom:1px solid #99CCFF;
border-left:1px solid #999CCFF;
border-right:1px solid #99CCFF;
width:127px;
vertical-align: bottom; /* This fixes the IE5 Win gap! */

}

#menu h2 a:hover /* all menus on mouse-over */
{
color: #FFF;
background-color:#99CCFF;
}

#menu h1 a, #menu h1 a:visited {
color: #999;
background: #e0e8f4;
padding-left: 0px;
border-bottom:1px solid #99CCFF;
border-left:1px solid #99CCFF;
border-right:1px solid #99CCFF;
width:127px;
vertical-align: bottom; /* This fixes the IE5 Win gap! */

}

#menu h1 a:hover /* all menus on mouse-over */
{
color: #FFF;
background-color:#485c82;
}

#menu h3 a, #menu h3 a:visited {
color: #999;
background: #e0e8f4;
text-indent: 5px;
border-bottom:1px solid #99CCFF;
border-left:1px solid #99CCFF;
border-right:1px solid #99CCFF;
width:147px;
vertical-align: bottom; /* This fixes the IE5 Win gap! */

}

#menu h3 a:hover /* all menus on mouse-over */
{
color: #FFF;
background-color:#485c82;
}

#menu h4 a, #menu h4 a:visited {
color: #000000;
background: #fff;
text-indent: 5px;
border-bottom:1px solid #99CCFF;
border-left:1px solid #99CCFF;
border-right:1px solid #99CCFF;
width:147px;
vertical-align: bottom; /* This fixes the IE5 Win gap! */

}

#menu h4 a:hover /* all menus on mouse-over */
{
color: #000000;
background-color:#99CCFF;
}

#menu a, #menu a:visited/* all menus at rest */
{
color: #000000;
background-color:#999;
text-decoration:none; /* removes underlines from links */
}

#menu a:hover /* all menus on mouse-over */
{
color: #99CCFF;
background-color:#FFF;

}

#menu li
{
list-style-type:none;

/* removes bullets */
}

#menu ul li
{
position:relative;
background:transparent ;

}

#menu li ul
{
position: absolute;
color:#666666;
top: 0;
filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
opacity:0.9;
background:transparent ;
background:#999; filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
opacity:0.8;
left: 149px; /* distance from left menu (this should be the same as width value in #menuv [1]) above */
display: none;
vertical-align: bottom; /* This fixes the IE5 Win gap! */

}

div#menu ul, #menuv ul ul, div#menuv ul ul ul
{
margin:0;
filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
opacity:0.9;
background:transparent ; /* keeps the menu parts together */
padding:0;
width: 149px; /* width of sub menus (this should be the same as width value in #menuv [1]) above */
}

div#menu ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv ul li:hover ul ul ul
{
display: none;
filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
opacity:0.9;
background:transparent );
}

div#menu ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul li:hover ul
{
filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
opacity:0.9;
display: block;
background:transparent ;
}

div#menu
{
position:top;
vertical-align:top;
background-color:#666666;
width: 149px;
text-align: left;
font-size: 14px;
font-family: helvetica, arial, geneva, sans-serif;
display:block;
float:left;
clear:left;
}

Help with a CSS / script menu

Any ideas?

japruitt

DrDoc

japruitt

DrDoc

japruitt

DrDoc

lexipixel

japruitt

lexipixel

csuguy

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week