No replies
jqdesigner
Offline
newbie
Last seen: 11 years 26 weeks ago
Joined: 2008-10-06
Posts: 2
Points: 0

This drop down menu is showing up fine in all browsers except ie6 and below. Can someone please help.

<!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"><head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script>
sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
 
<link href="css/header_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header_container ">
  <div class="header_graphic">
    <div class="LiveChat_holder"><a href="http://livechat.boldchat.com/aid/1651294420813749144/bc.chat?cwdid=4664786837523932155&amp;wdid=2726300162849160916&amp;rdid=3586893265149247163" target="_blank" onclick="window.open('http://livechat.boldchat.com/aid/1651294420813749144/bc.chat?cwdid=4664786837523932155&amp;wdid=2726300162849160916&amp;rdid=3586893265149247163&amp;url=' + escape(document.location.href), 'Chat4775155399365539852', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=480');return false;"><img alt="Live chat by BoldChat" src="http://cbi.boldchat.com/aid/1651294420813749144/bc.cbi?cbdid=2632963787303662481&amp;wdid=2726300162849160916&amp;rdid=3586893265149247163" border="0" /></a></div>
  </div>
  <ul id="navbar">
    <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
    <li><a href="index.html">home</a></li>
    <li><a href="http://webserver.getours.com/Tour00/catalog.taf"><b>free catalog</b></a></li>
    <li><a href="#">ways to save</a>
        <ul>
          <li><a href="static/2008grouppolicy.html">Organize A Group</a></li>
          <li> <a href="static/insurance.html">Travel Insurance</a></li>
          <li><a href="http://www.getours.ekit.com" target="_blank">Phonecards &amp; Cell Phones</a></li>
        </ul>
    </li>
    <li><a href="aboutus.html">about us</a>
        <ul>
          <li><a href="static/AboutGrandEuropeanTours.html">The Grand European Difference</a></li>
          <li><a href="static/ExclusiveTourFeatures.html">Exclusive Features</a></li>
          <li><a href="static/EuropeanTourTop10.html">10 Benefits of Escorted Travel</a></li>
          <li><a href="static/proservice.html">Our Tour Directors</a></li>
          <li><a href="static/grand european tours price guarantee.html">Price Guarantee</a></li>
          <li><a href="static/sustainable.html">Sustainable Tourism</a></li>
          <li><a href="static/testimonials.html">Testimonials</a></li>
          <li><a href="static/EscortedTourFAQ.html">FAQs</a></li>
          <li><a href="press/list.html">Press Releases</a></li>
          <li><a href="static/contactus.html">Contact Us</a></li>
          <li><a href="php/tripsearch.php">Trip Finder</a></li>
        </ul>
    </li>
    <li><a href="/destinations.html">destinations</a>
        <ul>
          <li><a href="search/region/brtn.html?img=topnav">great britain &amp; ireland</a></li>
          <li> <a href="search/region/fsi.html">france, italy &amp; spain</a></li>
          <li> <a href="search/region/grm.html">greece, turkey &amp; egypt</a></li>
          <li> <a href="search/region/cen.html">alpine, central &amp; eastern europe</a></li>
          <li> <a href="search/type/rtw.html">usa, mexico &amp; south america</a></li>
          <li> <a href="search/region/scn.html">russia &amp; scandinavia</a></li>
          <li> <a href="search/region/asia.html">china</a></li>
          <li> <a href="search/type/cruise.html?img=image">european river cruises</a></li>
          <li> <a href="php/tripsearch.php">trip finder</a></li>
        </ul>
    </li>
    <li class="travel"><a href="travelfolder.html">my travel folder&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="http://webserver.getours.com/tour00/booking/products.taf">book now</a></li>
  </ul>
</div>
</body>
</html>

CSS

#navbar {
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
	text-transform: uppercase;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	height: 30px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	background-image: url(/header_images/header_bg.png);
	background-repeat: repeat-x;
	width: 800px;
	font-style: normal;
	display: block;
	list-style-image: none;
	list-style-type: none;
	font-weight: normal;
	z-index: 1050;
}
.header_container {
	width: 800px;
	clear: both;
	text-align: left;
}
.header_graphic {
	background-image: url(../header_images/header.png);
	background-repeat: no-repeat;
	height: 120px;
	width: 800px;
}
.LiveChat_holder {
	height: 35px;
	width: 120px;
	padding-top: 65px;
	padding-left: 500px;
}
#navbar li {
	float: left;
	display: block;
}
#navbar li.travel {
	list-style: none;
	float: left;
	background-image: url(/header_images/folder_icon.png);
	background-repeat: no-repeat;
	background-position: -120px;
}
#navbar li a {
	display: block;
	color: #0168A8;
	text-decoration: none;
	height: 30px;
	line-height: 30px;
	border-left-style: solid;
	border-left-width: 1px;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	padding-right: 15px;
	padding-left: 15px;
	list-style-image: none;
	list-style-type: none;
}
#navbar li a:hover {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	height: 30px;
	line-height: 30px;
	background-image: url(/header_images/nav_hover.png);
	background-repeat: repeat-x;
}
#navbar li.travel a:hover {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	height: 30px;
	padding-right: 16px;
	padding-left: 16px;
	line-height: 30px;
	background-image: url(/header_images/folder_icon_hover.png);
	background-repeat: no-repeat;
	background-position: -120px;
}
#navbar li ul {
	display: none;
	background-color: #FFFFFF;
	text-align: left;
	width: 265px;
	list-style-image: none;
	list-style-type: none;
}
#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	margin: 0;
	padding: 0;
	position: absolute;
}
#navbar li:hover li, #navbar li.hover li {
	float: none; }
#navbar li:hover li a, #navbar li.hover li a {
	color: #0168A8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
#navbar li li a:hover {
	color: #FFFFFF;
	background-image: url(/header_images/nav_hover.png);
	background-repeat: repeat-x;
}