drop down not working in ff and chrome

Discussion in 'HTML and CSS' started by anujojha, Jul 10, 2009.

  1. anujojha

    anujojha

    Joined:
    Jul 10, 2009
    Messages:
    1
    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);
     
    anujojha, Jul 10, 2009
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    781
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,033
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    497
    msimmons
    Jul 16, 2009
  4. xxbmichae1@supergambler.com

    Auto Drop down a Drop Down List

    xxbmichae1@supergambler.com, Nov 22, 2005, in forum: Javascript
    Replies:
    5
    Views:
    282
    xxbmichae1@supergambler.com
    Nov 23, 2005
  5. OccasionalFlyer

    Chrome Inserts Extra Blank Lines in Drop-Down list

    OccasionalFlyer, Apr 22, 2010, in forum: Javascript
    Replies:
    1
    Views:
    190
Loading...

Share This Page