Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > drop down not working in ff and chrome

Reply
Thread Tools

drop down not working in ff and chrome

 
 
anujojha anujojha is offline
Junior Member
Join Date: Jul 2009
Posts: 1
 
      07-10-2009
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[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);
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Chrome Inserts Extra Blank Lines in Drop-Down list OccasionalFlyer Javascript 1 04-22-2010 06:14 AM
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
Google Chrome OS, Odds are stacked against Chrome OS's success Max Burke NZ Computing 1 07-11-2009 04:38 AM
retrive preselected value in second drop down list from the first drop down list weiwei ASP .Net 0 01-05-2007 07:29 PM
New to .NET, can I have one drop down box control the data of another drop down box using a database? SirPoonga ASP .Net 2 01-07-2005 10:44 PM



Advertisments