SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Location
    Manchester, UK
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdowns in Firefox

    Hi

    I was hoping that someone could help me out, i'm trying to get some CSS dropdowns working, having worked through several tutorials they look ok in IE but not in Firefox (I haven't even tried anything else) but if I can cover those two that'd be good. You can see the page here http://www.rf-id.com/v02/test.htm

    The page code is here

    HTML Code:
    <HTML>
    <head>
    <title>RF-ID.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="CSS/rfid.css" media="all">
    
    <script type="text/javascript" language="JavaScript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("topnav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    </head>
    
    <body><div id="container">
      <ul id="topnav" class="menutext">
        <li><a href="1rfid134/rfid134.htm">RF-ID 134Khz </a></li>
        <ul>
          <li><a href="1rfid134/LF100.htm">LF100 </a></li>
          <li><a href="1rfid134/LF115.htm">LF115</a></li>
          <li><a href="1rfid134/barcode_reader.htm">Barcode Reader</a></li>
          <li><a href="1rfid134/FixedTagReader.htm">Fixed Tag Reader</a></li>
          <li><a href="1rfid134/TagStyles.htm">Tag Styles</a></li>
          <li><a href="1rfid134/Tags.htm">Tags</a></li>
        </ul></li>
        <li><a href="2rfid13.56/rfid1356.htm">RF-ID 13.56Mhz</a></li>
        <ul>
          <li><a href="2rfid13.56/1356tagproducts.htm">Tag Products</a></li>
          <li><a href="2rfid13.56/geminiHF200.htm">HF200</a></li>
          <li><a href="2rfid13.56/geminiHF210.htm">HF210</a></li>
          <li><a href="2rfid13.56/1356taglabels.htm">RF-ID Labels</a></li>
          <li><a href="2rfid13.56/cfreader.htm">CF Reader</a></li>
          <li><a href="2rfid13.56/jettce.htm">Jett CE Reader</a></li>
          <li><a href="2rfid13.56/tagitrfidtags.htm">Tag-IT Tags</a></li>
        </ul></li>
        <li><a href="3rfid869/rfid869.htm">RF-ID 869Mhz </a></li>
        <ul>
          <li><a href="3rfid869/rfid869tags.htm">Tags</a></li>
          <li><a href="3rfid869/rfid869fixeduhf.htm">Fixed Readers</a></li>
          <li><a href="3rfid869/rfid869handhelds.htm">Handhelds</a></li>
        </ul></li>
        <li><a href="4rfid2.4/rfid2-4.htm">RF-ID 2.4Ghz </a></li>
        <ul>
          <li><a href="4rfid2.4/rfid2-4reader_pro.htm">1555</a></li>
          <li><a href="4rfid2.4/rfid2-4tag.htm">Tag Products</a></li>
          <li><a href="4rfid2.4/rfid2-4labels.htm">Labels</a></li>
          <li><a href="4rfid2.4/rfid2-4truckmount.htm">Truck Mount</a></li>
          <li><a href="4rfid2.4/rfid2-4information.htm">Information</a></li>
          <li><a href="4rfid2.4/rfid2-4fixedreader.htm">Fixed Installation Reader</a></li>
        </ul></li>
        <li><a href="5rfidaccess/rfidacess.htm">RF-ID Access </a></li>
        <ul>
          <li><a href="5rfidaccess/rfidaccess600.htm">600 RF-ID Access</a></li>
          <li><a href="5rfidaccess/rfidaccess603.htm">603 RF-ID Access</a></li>
        </ul></li>
        <li><a href="6information/rfid_information.htm">Information </a></li>
        <ul>
          <li><a href="6information/rfid_info_articles.htm">Articles</a></li>
          <li><a href="6information/rfid_info_examples.htm">Examples</a></li>
          <li><a href="6information/rfid_info_techexplained.htm">Technology Explained</a></li>
        </ul></li>
        
      </ul>
    </div>
    </body>
    </HTML>
    And the Css is here

    Code:
    #container {
    	margin: 0px auto;
    	width:  700px;
    	text-align: left;
    	position: relative;
    	padding: 0 10px 0 10px;
    	left: 22px;
    
    }
    /*Drop down Divs*/
    
    #topnav, #topnav ul { /*top menus*/
    	float: left;
    	width:100%;
    	list-style: none;
    	line-height: 1.75em;
    	background: #831616;
    	font-weight: bold;
    	padding: 0;
    	margin: 0 0 0 0;
    
    }
    
    #topnav a {
    	display: block;
    	color: white;
    	text-decoration: none;
    	padding: 0.25em 0.5em;
    	border-left: 3px solid #E0C5C5;/*#D4B4A7*/
    	font-family:verdana;
    	border-bottom:none;
    }
    
    #topnav li {
    	float: left;
    	padding: 0;
    	width:auto;
    }
    
    #topnav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width:100%;
    	font-weight: normal;
    	margin: 0;
    }
    
    #topnav li li { /*second menu items*/
    	padding-right: 0.1em;
    	width:101%;
    	border-bottom: 1px solid #E0C5C5;
    }
    
    #topnav li ul a {
    	color: white;
    	font-family:verdana;
    	text-decoration:none;
    	font-weight:normal;
    	border-bottom:none;
    }
    
    #topnav li ul ul {
    	margin: -1.75em 0 0 15em;
    }
    
    #topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li.sfhover ul ul, #topnav li.sfhover ul ul ul {
    	left: -999em;
    }
    
    #topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li.sfhover ul, #topnav li li.sfhover ul, #topnav li li li.sfhover ul {
    	left: auto;
    }
    
    #topnav li:hover, #topnav li.sfhover {
    	background: #C28B8B;
    }
    Cheers for your help

    Rich

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    validate your html, your CDATA haze an error, your UL LI list haze nesting errors
    correct that and the menu starts to work in FF OP NS, but still needs work

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Location
    Manchester, UK
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I figured it out now, just to to tweak the CSS a bit to get it to work ok in FF, looks on in OP and IE now.

    Cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •