SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Dropdowns in Firefox
-
Aug 13, 2005, 03:56 #1
- 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>
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; }
Rich
-
Aug 13, 2005, 09:07 #2
- 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
-
Aug 13, 2005, 10:18 #3
- 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