View Full Version : Works in IE7 but not 6, just a simple drop down menu

01-29-2007, 07:55 PM
Ok I am just creating a simple drop down menu. The menu is horizontal and works perfect in IE7. Everyone that views it in IE6 sees it vertical and its all messed up.

Here is the link

Any help I can get would be awesomely appreciated!!

Here is my html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />

<script type="text/javascript" src="csshorizontalmenu.js">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.style1 {color: #FFFFFF}

<table width="780" border="0" cellpadding="0" cellspacing="0">
<td width="780" height="13" valign="top"><div align="center"><img src="Logo.jpg" width="780" height="117" /></div></td>
<td height="19" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="menubackground.gif">
<td width="780" height="19" valign="top"><div class="horizontalcssmenu">
<ul id="cssmenu1">
<li style="border-left: 0px solid #202020;"><a href="http://www.getdatacom.com/" class="style1">Home<img src="spacer.gif" border="0"></a></li>
<li><a href="technologyoverview.html">Technology Solutions<img src="spacer.gif" border="0"></a>
<li><a href="http://www.javascriptkit.com/jsref/">EPC Services</a></li>
<li><a href="http://www.javascriptkit.com/domref/">EF&I Services</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">IT Services</a></li>
<li><a href="#">People Soltutions<img src="spacer.gif" border="0"></a>
<li><a href="http://www.javascriptkit.com/jsref/">Client Services</a></li>
<li><a href="http://www.javascriptkit.com/domref/">Candidate Services</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">Candidate Profile FAQ</a></li>
<li><a href="#">Training<img src="spacer.gif" border="0"></a>
<li><a href="http://www.javascriptkit.com/jsref/">New Horizons Lafayette</a></li>
<li><a href="http://www.javascriptkit.com/domref/">New Horizons Houston</a></li>
<li><a href="http://www.javascriptkit.com/howto/">Safety<img src="spacer.gif" border="0"></a></li>
<li><a href="#">About Us<img src="spacer.gif" border="0"></a>
<li><a href="http://www.dynamicdrive.com">Why Choose Datacom</a></li>
<li><a href="http://www.codingforums.com">Information Request</a></li>
<li><a href="http://www.cssdrive.com">Safety Program</a></li>
<li><a href="http://www.dynamicdrive.com/style/">Quality Commitment</a></li>
</div> </td>
</table> </td>
<td height="45" valign="top"><img src="TopArch.jpg" width="780" height="45" /></td>
<td height="260">&nbsp;</td>

Here is the csshorizontalmenu.js

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
background-color: 202020;


/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
/*width: 100px; /*Width of top level menu link items*/
height: 18px;
padding: 0px 0px;
border: 0px solid #202020;
border-left-width: 0;
text-decoration: none;
background: url(menubg.gif) center center repeat-x;
color: White;
font: 12px Arial;

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;

/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: url(menubgover.gif) center center repeat-x;
border-width: 0 1px 1px 1px;

.horizontalcssmenu ul li a:hover{
background: url(menubgover.gif) center center repeat-x;

.horizontalcssmenu ul li ul li a:hover{
background: #8BBF1F;

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */