hi guys.
I am having trouble getting my drop to work on ff and chrome.
It works perfect on IE7 but gives problem on IE6.
can you guys please tell me where the problem is
please help me out...
code
.html file
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://www.webmaster-talk.com/images/stuHover.js" type="text/javascript"></script>
<title> template</title>
</head>
<body>
<span class="preload1"></span>
<span class="preload2"></span>
<div id="container">
<div id="header">
<ul id='nav' name="nav">
<li class="top"><a href="#" id = "Games" class="top_link"><span class="down">Games </span></a></li>
<ul class="sub">
<li><a href="#">Mission TZ</a></li>
<li><a href="#">NFS</a></li>
<li><a href="#">DOTA</a></li>
<li><a href="#">WAR CRAFT</a></li>
<li><a href="#">Commandos</a></li>
<li><a href="#">simcity</a></li>
</ul>
<li class='top'><a href="#" id = "console" class="top_link"><span class="down">Consoles</span></a></li>
<ul class="sub">
<li><a href="#">ps1</a></li>
<li><a href="#">ps2</a></li>
<li><a href="#">X-box 360</a></li>
<li><a href="#">ps3</a></li>
</ul>
<li class="top"><a href="#" id = "teamgames" class="top_link"><span class ="down">TEAM games</span></a></li>
<ul class="sub">
<li><a href="#">commandos</a></li>
<li><a href="#">commandos2</a></li>
<li><a href="#">counter strik</a></li>
<li><a href="#">warcraft</a></li>
<li><a href="#">dota</a></li>
</ul>
<li class="top"><a href="#" id = "racing" class="top_link"><span class ="down">racing</span></a></li>
<ul class="sub">
<li><a href="#">NFS</a></li>
<li><a href="#">NFS underground</a></li>
</ul>
<li class="top"><a href="#" id = "strategy" class="top_link"><span class="down">strategy</span></a></li>
<ul class="sub">
<li><a href="#">counter strik</a></li>
<li><a href="#">war craft</a></li>
<li><a href="#">dota</a></li>
<li><a href="#">commandos 3-back again</a></li>
<li><a href="#">GTA</a></li>
<li><a href="#">fifa</a></li>
<li><a href="#">nfs</a></li>
</ul>
<li class="top"><a href="#" id = "sports" class="top_link"><span class ="down">sports</span></a></li>
<ul class="sub">
<li><a href="#">fifa</a></li>
<li><a href="#">cricket t20 world cup 2009</a></li>
<li><a href="#">NBA</a></li>
<li><a href="#">base ball</a></li>
</ul>
<li class="top"><a href="#" id = "Contacts" class="top_link"><span class="down">CONTACTS</span></a></li>
<ul class="sub">
<li><a href="#">site administrator</a></li>
</ul>
</ul>
</div>
<div id="content">
<div id="right">
<div class="menu">
<div class="menuheader"><h3>players</h3></div>
<div class="menucontent">
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member1.jpg" alt="member" /></a>
<span><a href="#">player 1</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member2.jpg" alt="member" /></a>
<span><a href="#">player 2</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member3.jpg" alt="member" /></a>
<span><a href="#">player 3</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member4.jpg" alt="member" /></a>
<span><a href="#">player 4</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member5.jpg" alt="member" /></a>
<span><a href="#">player 5</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member6.jpg" alt="member" /></a>
<span><a href="#">player 6</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member7.jpg" alt="member" /></a>
<span><a href="#">player 7</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member8.jpg" alt="member" /></a>
<span><a href="#">player 8</a></span>
</div>
<div class="clear"></div>
</div>
<div class="menufooter"></div>
</div>
<br />
<div class="menu">
<div class="menuheader">
<h3>players</h3>
</div>
<div class="menucontent">
<marquee direction="up" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member1.jpg" alt="member" /></a>
<span><a href="#">player 1</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member2.jpg" alt="member" /></a>
<span><a href="#">player 2</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member3.jpg" alt="member" /></a>
<span><a href="#">player 3</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member4.jpg" alt="member" /></a>
<span><a href="#">player 4</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member5.jpg" alt="member" /></a>
<span><a href="#">player 5</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member6.jpg" alt="member" /></a>
<span><a href="#">player 6</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member7.jpg" alt="member" /></a>
<span><a href="#">player 7</a></span>
</div>
<div class="member">
<a href="#"><img src="http://www.webmaster-talk.com/images/member8.jpg" alt="member" /></a>
<span><a href="#">player 8</a></span>
</div>
</marquee>
<div class="clear"></div>
</div>
<div class="menufooter"></div>
</div>
<br />
</div>
<div id="middle">
<div class="post">
<div class="postheader">
<h1>standings</h1>
</div>
<div class="postcontent">
<p><img src="http://www.webmaster-talk.com/images/member1.jpg" align="left" > <u> sfadgadasdf asd fasdf asdf </u><br /> asdf asd fasd fas dfa sdf asdf asd fas dfa sdfa sdf asd fas dfasd fas dfa sdfa sd</p><br /><br />
<hr />
<p><img src="http://www.webmaster-talk.com/images/member1.jpg" align="left" > <u> sfadgadasdf asd fasdf asdf </u><br /> asdf asd fasd fas dfa sdf asdf asd fas dfa sdfa sdf asd fas dfasd fas dfa sdfa sd</p><br /><br />
<hr />
<p><img src="http://www.webmaster-talk.com/images/member1.jpg" align="left" > <u> sfadgadasdf asd fasdf asdf </u><br /> asdf asd fasd fas dfa sdf asdf asd fas dfa sdfa sdf asd fas dfasd fas dfa sdfa sd</p><br /><br />
<hr />
<p><img src="http://www.webmaster-talk.com/images/member1.jpg" align="left" > <u> sfadgadasdf asd fasdf asdf </u><br /> asdf asd fasd fas dfa sdf asdf asd fas dfa sdfa sdf asd fas dfasd fas dfa sdfa sd</p><br /><br />
<hr />
<p><img src="http://www.webmaster-talk.com/images/member1.jpg" align="left" > <u> sfadgadasdf asd fasdf asdf </u><br /> asdf asd fasd fas dfa sdf asdf asd fas dfa sdfa sdf asd fas dfasd fas dfa sdfa sd</p><br /><br />
<hr />
</div>
<div class="postfooter"></div>
</div>
<div class="post">
<div class="postheader"><h1>AAA</h1></div>
<div class="postcontent">
<p>asasda asd asd as das da sd asd s dgd fg th f b fvb d cfv dr f er gf </p>
<p>asasda asd asd as das da sd asd s dgd fg th f b fvb d cfv dr f er gf </p>
<p>asasda asd asd as das da sd asd s dgd fg th f b fvb d cfv dr f er gf </p>
<p>asasda asd asd as das da sd asd s dgd fg th f b fvb d cfv dr f er gf </p>
<p>asasda asd asd as das da sd asd s dgd fg th f b fvb d cfv dr f er gf </p>
<p>asasda asd asd as das da sd asd s dgd fg th f b fvb d cfv dr f er gf </p>
<p>asasda asd asd as das da sd asd s dgd fg th f b fvb d cfv dr f er gf </p>
</div>
<div class="postfooter"></div>
</div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="#">ABOUT Us</a></li>
<li><a href="#">PLANS</a></li>
<li><a href="#">TEAM</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">SITES</a></li>
<li class="last"><a href="#">contact</a></li>
</ul>
<span>Copyright © developed by AJ</span> </div>
</div>
</body>
</html>
.css file
body {
/* background-image:url(images/background.gif); */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
background-repeat: repeat-x;
background-color: #FFFFFF;
}
* {margin: 0px;padding: 0px;}
p {
padding: 10px 10px 10px 20px;
display:block;
color:#525757;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align:center;
}
hr {
color: #999999;
margin-left: 10px;
margin-right: 10px;
}
.postcontent img{
width:75px;
height:70px;
border: solid 2px #999999;
}
.postcontent u{
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform: uppercase;
color:#999999;
}
a {
color:#6b7272;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
#container {
margin-left: 224px;
margin-top: 168px;
text-align: left;
width: 800px;
background-color:#000000;
}
#header{
margin-top: 10px;
height:304px;
width:777px;
background-image:url(images/header.jpg);
background-repeat: no-repeat;
}
#content{
}
#left{
width:192px;
float:left;
}
#middle{
margin-left: 20px;
margin-right: 40px;
width: 450px;
}
#right{
width: 192px;
float: right;
margin-bottom: 20px;
}
/********************* menu ****************************/
.menuheader{
width: 192px;
height: 37px;
background-image:url(images/menutop.gif);
display: block;
}
.menucontent{
width:192px;
background-image:url(images/menumiddle.gif);
padding-top:10px;
background-repeat: repeat-y;
}.menuheader h3{
padding: 10px 0px 0px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.menufooter{
width:192px;
height:15px;
background-image:url(images/menubottom.gif);
display:block;
}
.postheader,.menuheader{
color:#CCCCCC;
text-transform: uppercase;
}
/********************* post ****************************/
.post{
margin-bottom:15px;
}
.postheader{
background-image:url(images/posttop.gif);
display:block;
width:450px;
height:33px;
}
.postheader h1{
padding: 7px 0px 0px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
.postcontent{
background-image:url(images/postmiddle.gif);
background-repeat: repeat-y;
padding: 20px 0px;
}
/*
.postimg{
display:block;
border: solid 2px #999999;
float:left;
}*/
.postfooter{
background-image:url(images/postbottom.gif);
background-repeat: no-repeat;
display:block;
width:450px;
height:15px;
}
/********************* header ****************************/
#header{
position:relative;
}
#header ul{
position:absolute;
top:243px;
display:block;
left:0px;
width: 800px;
}
#header ul li{
display:inline;
text-align:center;
margin: auto;
width: auto;
border-right: 1px solid #6b7272;
}
.last{
border-right: 0px none #6b7272 !important;
}
#header ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#header ul li a:hover{
text-decoration:underline;
}
/********************* footer ****************************/
#footer{
width:850px;
}
#footer ul{
display:block;
margin-left:190px;
}
#footer ul li{
display:inline;
text-align:center;
margin: auto;
width: auto;
border-right: 1px solid #6b7272;
}
#footer ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer span{
color:#525757;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align:center;
width:850px;
display:block;
padding: 15px 0px;
}
/********************* menu members ****************************/
.menu ul{
list-style-position: inside;
list-style-type: disc;
padding: 0px 0px 0px 20px;
color:#666666;
}
.menu ul li{
padding-top: 5px;
color:#666666;
}
.menu ul li a{
text-decoration:none;
padding: 0px;
text-transform: uppercase;
}
.menu ul li a:hover{
text-decoration:underline;
text-transform: uppercase;
}
.member{
display:inline;
float:left;
margin-left:10px;
}
.member span{
display:block;
text-align:center;
padding: 2px 0px 13px 0px;
text-transform: uppercase;
}
.member img{
width:75px;
height:70px;
border: solid 2px #999999;
}
.clear{
clear:both;
}
/* css for Drop Down Menu */
.preload1 {background: url(images/three_1.gif);}
.preload2 {background: url(images/three_1a.gif);}
#nav {
padding:0;
margin:0;
list-style:none;
height:34px;
background:#fff url(images/three_0.gif) repeat-x;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
}
#nav li.top {display:block; float:left; height:35px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor: pointer;background: url(images/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/three_0a.gif) no-repeat right top;}
#nav li:hover a.top_link {color:#fff; background: url(images/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(images/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(images/three_1a.gif) no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:35px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width: auto; height: auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; /*height:20px; position:relative;float:left;*//*removed to keep the small line in drop down alligned at right and the text to left*/ text-align:left; width: auto; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; text-align:left;font-size:9px; height:18px; width: auto/*was previously 88px*/; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background: #bbd37e url(images/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(images/arrow_over.gif) 80px 6px no-repeat; color:#fff;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height: auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(images/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(images/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}
java script
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
