Dropdowns in Firefox

**RichClark** · Aug 13, 2005, 03:56

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

**all4nerds** · Aug 13, 2005, 09:07

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

**RichClark** · Aug 13, 2005, 10:18

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

The SitePoint Forums have moved.

User Tag List

Thread: Dropdowns in Firefox

Thread Tools

Display

Dropdowns in Firefox

Bookmarks

Bookmarks

Posting Permissions