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
.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.rules.length ; x++)
{
cssRule = document.styleSheets.rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets.addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<getElm.length; i++) {
getElm.onmouseover=function() {
this.className+=" iehover";
}
getElm.onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
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
.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.rules.length ; x++)
{
cssRule = document.styleSheets.rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets.addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<getElm.length; i++) {
getElm.onmouseover=function() {
this.className+=" iehover";
}
getElm.onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);