Top Nav Css Menu not working in firefox
Top Nav Css Menu not working in firefox
Hello, I'm looking for some help please.
If I open html file in IE or Opera it works fine, but when I open it using Firefox it dosen't.
As you will see with IE or Opera moving over nav link will show image background for each link. When I open html with Firefox I only get the last nav link to display image background.
I've only tried IE, Opera and Firefox, dont know if others the some as Firefox.
Below is my top nav menu code (xhtml and css codes) and image button
IMAGE BUTTON:
index file XHTML CODE:
style CSS Code:HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="3600" /> <meta name="revisit-after" content="2 days" /> <meta name="robots" content="index,follow" /> <meta name="publisher" content="http://www.websitepackageservices.com" /> <meta name="copyright" content="http://www.websitepackageservices.com" /> <meta name="author" content="Design: http://www.websitepackageservices.com" /> <meta name="distribution" content="global" /> <meta name="description" content="topMenuŠ Copyright 2010" /> <meta name="keywords" content="topMenuŠ Copyright 2010" /> <title>Website Package Services</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="icon" type="image/x-icon" href="./img/favicon.ico" /> <!-- /*********************************************** * - topMenuŠ Copyright 2010 - * Designed by Website Package Services: http://www.websitepackageservices.com * If any part of this file is used please keep the footer credits with the words * "Powered by www.websitepackageservices.com" * Thank you! ***********************************************/ --> </head> <body> <div id="topPanel"> <!--topPanel Nav start --> <div id="topPanel"><ul><li class="active">Home</li></ul> <div id="topPanel2"><ul><li><a href="#">Website</a></li></ul> <div id="topPanel3"><ul><li><a href="#">Package</a></li></ul> <div id="topPanel4"><ul><li><a href="#">Services</a></li></ul> <div id="topPanel5"><ul><li><a href="#">Advertise</a></li></ul> <div id="topPanel6"><ul><li><a href="#">Contact</a></li></ul> </div></div></div></div></div></div></div> <!--topPanel Nav end --> <!--footer start --> <div id="footer"> <p>Copyright © Website Package Services 2010 All Rights Reserved</p> <p>Powered by <a href="http://www.websitepackageservices.com" target="_parent" title="Website Package Services">Website Package Services</a></p> </div> <!--footer end --> </body> </html>
Code:/************************************************************************/ /* Design: topMenuŠ Copyright 2010 */ /* File: Global layout structure */ /*----------------------------------------------------------------------*/ /* Designed by: www.websitepackageservices.com */ /* Date: May 08, 2010 */ /*----------------------------------------------------------------------*/ /* License: If any part of this file is used */ /* please keep credits with the words */ /* "Design by www.websitepackageservices.com". */ /* Thank you! */ /************************************************************************/ /* CSS Document */ body{background:#fff; color:#0F0F0F; font:15px/20px Arial, Helvetica, sans-serif; margin:32px 0 0; padding:0;} div, ul, h1, h2, h3, li, p, img{margin:0; padding:0;} ul{list-style-type:none;} /* TOP PANEL*/ #topPanel{width:762px; height:373px; position:relative; margin:0 auto; padding:0;} /* MENU PANEL*/ #topPanel ul{display:block; width:732px; height:36px; position:absolute; top:3px; right:370px; margin:11px 0 0; padding:0 29px 0 0; border-bottom:1px solid #AEAEAE;} #topPanel ul li{float:right; font:12px/36px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold;} #topPanel ul li a{width:74px; height:36px; display:block; padding:0; color:#555; background:#fff; text-decoration:none; text-align:center; margin:0 1px 0 0; top:0px; left:0px;} #topPanel ul li.active{width:74px; display:block; height:48px; background:url(home.jpg) no-repeat 0 0 #AEAEAE; color:#fff; text-align:center; margin:0 1px 0 0;} /* MENU PANEL2*/ #topPanel2 ul{display:block; width:732px; height:36px; position:absolute; top:3px; right:296px; margin:11px 0 0; padding:0 29px 0 0; border-bottom:1px solid #AEAEAE;} #topPanel2 ul li{float:right; font:12px/36px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold;} #topPanel2 ul li a{width:74px; height:36px; display:block; padding:0; color:#555; background:#fff; text-decoration:none; text-align:center; margin:0 1px 0 0; top:0px; left:0px;} #topPanel2 ul li a:hover{width:74px; height:48px; text-decoration:none; background:url(home.jpg) no-repeat 0 0 #AEAEAE; color:#fff;} /* MENU PANEL3*/ #topPanel3 ul{display:block; width:732px; height:36px; position:absolute; top:3px; right:222px; margin:11px 0 0; padding:0 29px 0 0; border-bottom:1px solid #AEAEAE;} #topPanel3 ul li{float:right; font:12px/36px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold;} #topPanel3 ul li a{width:74px; height:36px; display:block; padding:0; color:#555; background:#fff; text-decoration:none; text-align:center; margin:0 1px 0 0; top:0px; left:0px;} #topPanel3 ul li a:hover{width:74px; height:48px; text-decoration:none; background:url(home.jpg) no-repeat 0 0 #AEAEAE; color:#fff;} /* MENU PANEL4*/ #topPanel4 ul{display:block; width:732px; height:36px; position:absolute; top:3px; right:148px; margin:11px 0 0; padding:0 29px 0 0; border-bottom:1px solid #AEAEAE;} #topPanel4 ul li{float:right; font:12px/36px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold;} #topPanel4 ul li a{width:74px; height:36px; display:block; padding:0; color:#555; background:#fff; text-decoration:none; text-align:center; margin:0 1px 0 0; top:0px; left:0px;} #topPanel4 ul li a:hover{width:74px; height:48px; text-decoration:none; background:url(home.jpg) no-repeat 0 0 #AEAEAE; color:#fff;} /* MENU PANEL5*/ #topPanel5 ul{display:block; width:732px; height:36px; position:absolute; top:3px; right:74px; margin:11px 0 0; padding:0 29px 0 0; border-bottom:1px solid #AEAEAE;} #topPanel5 ul li{float:right; font:12px/36px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold;} #topPanel5 ul li a{width:74px; height:36px; display:block; padding:0; color:#555; background:#fff; text-decoration:none; text-align:center; margin:0 1px 0 0; top:0px; left:0px;} #topPanel5 ul li a:hover{width:74px; height:48px; text-decoration:none; background:url(home.jpg) no-repeat 0 0 #AEAEAE; color:#fff;} /* MENU PANEL6*/ #topPanel6 ul{display:block; width:732px; height:36px; position:absolute; top:3px; right:0; margin:11px 0 0; padding:0 29px 0 0; border-bottom:1px solid #AEAEAE;} #topPanel6 ul li{float:right; font:12px/36px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold;} #topPanel6 ul li a{width:74px; height:36px; display:block; padding:0; color:#555; background:#fff; text-decoration:none; text-align:center; margin:0 1px 0 0; top:0px; left:0px;} #topPanel6 ul li a:hover{width:74px; height:48px; text-decoration:none; background:url(home.jpg) no-repeat 0 0 #AEAEAE; color:#fff;} #footer p{ text-align:center; margin:4px 0 0 0;font-size:11px; line-height:16px; } #footer p a{ color:#000000; text-decoration:none; background-color:inherit; } #footer p a:hover{ color:#C3C491; background-color:inherit;
CSS Codes
Reply With Quote
Update/resolved
Bookmarks