Log in

View Full Version : BUMP-NAV BAR problem only in Firefox?!? REPEATED BUTTON-Help


zeech26
10-05-2009, 08:23 PM
I am reposting, as unfortunately I have had no responses. Help?
Anyone? Thanks in advance.

Hello, using a CSS script I built from the apple.com theme, I am having problems in firefox with a repeated final button on my Nav Bar, but no problems in any other browsers.

I have tried to figure out what is causing the button to repeat and drop down and have had no luck. Anyone want to share their thoughts?

zeech

Here is the URL:http://www.surflaspalmeras.com/header_test.html
Here is the code:
<div id="globalheader">
<!--googleoff: all-->
<ul id="globalnav">
<li id="home"><a href="index.html">Home</a></li>
<li id="surfing"><a href="surfing.html">Surfing</a></li>
<li id="activities"><a href="activities.html">Activities</a></li>
<li id="reservations"><a href="reservations.html">Reservations</a></li>
<li id="about_us"><a href="about_us.html">About Us</a></li>
<li id="spanish"><a href="spanish.html">Z</a></li>
</ul>
</div>

Here is the CSS:
/* GLOBALHEADER */
#globalheader { width: 800px; height: 25px; margin: 1px auto 2px auto; position: relative; z-index: 9998; padding-left:2px; background-color:#000000; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 133px; height: 0; padding-top: 25px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalnav {background-image:url(../images/NAVBAR.png); background-repeat: no-repeat; }
/* BUTTONS */
#globalheader #globalnav li#home a { background-position: 0 0; }
#globalheader #globalnav li#surfing a { background-position: -133px 0; }
#globalheader #globalnav li#activities a { background-position: -266px 0; }
#globalheader #globalnav li#reservations a { background-position: -399px 0; }
#globalheader #globalnav li#about_us a { background-position: -532px 0; }
#globalheader #globalnav li#spanish a { background-position: -665px 0; }
/* OVER STATES */
#globalheader #globalnav li#home a:hover { background-position: 0 -25px; }
#globalheader #globalnav li#surfing a:hover { background-position: -133px -25px; }
#globalheader #globalnav li#activities a:hover { background-position: -266px -25px; }
#globalheader #globalnav li#reservations a:hover { background-position: -399px -25px; }
#globalheader #globalnav li#about_us a:hover { background-position: -532px -25px; }
#globalheader #globalnav li#spanish a:hover { background-position: -665px -25px; }
/* PRESSED STATES */
#globalheader #globalnav li#home a:active { background-position: 0 -50px; }
#globalheader #globalnav li#surfing a:active { background-position: -133px -50px; }
#globalheader #globalnav li#activities a:active { background-position: -266px -50px; }
#globalheader #globalnav li#reservations a:active { background-position: -399px -50px; }
#globalheader #globalnav li#about_us a:active { background-position: -532px -50px; }
#globalheader #globalnav li#spanish a:active { background-position: -665px -50px; }
/* ON STATES */
#globalheader.home #globalnav li#home a:hover { background-position: 0 0; cursor: default; }
#globalheader.surfing #globalnav li#surfing a { background-position: -133px -75px !important; }
#globalheader.activities #globalnav li#activities a { background-position: -266px -75px !important; }
#globalheader.reservations #globalnav li#reservations a { background-position: -399px -75px !important; }
#globalheader.about_us #globalnav li#about_us a { background-position: -532px -75px !important; }
#globalheader.spanish #globalnav li#spanish a { background-position: -665px -75px !important; }
coothead
10-06-2009, 11:36 AM
Hi there zeech26,

this is how I would do it...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://www.surflaspalmeras.com/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
background-color:#333;
}
#globalnav {
width:798px;
height:25px;
padding:0;
margin:0 auto;
list-style-type:none;
}
#globalnav li {
float:left;
width:133px;
}
#globalnav a {
display:block;
height:25px;
background-image:url(images/NAVBAR.png);
}

#globalnav span {display:none;}

#home {background-position:0 0;}
#surfing {background-position:-133px 0;}
#activities {background-position:-266px 0;}
#reservations {background-position:-399px 0;}
#about_us {background-position:-532px 0;}
#spanish {background-position:-665px 0;}

#home:visited {background-position:0 -75px;}
#surfing:visited {background-position:-133px -75px;}
#activities:visited {background-position:-266px -75px;}
#reservations:visited {background-position:-399px -75px;}
#about_us:visited {background-position:-532px -75px;}
#spanish:visited {background-position:-665px -75px;}

#home:hover {background-position:0 -25px;}
#surfing:hover {background-position:-133px -25px;}
#activities:hover {background-position:-266px -25px;}
#reservations:hover {background-position:-399px -25px;}
#about_us:hover {background-position:-532px -25px;}
#spanish:hover {background-position:-665px -25px;}

#home:active {background-position:0 -50px;}
#surfing:active {background-position:-133px -50px;}
#activities:active {background-position:-266px -50px;}
#reservations:active {background-position:-399px -50px;}
#about_us:active {background-position:-532px -50px;}
#spanish:active {background-position:-665px -50px;}
</style>

</head>
<body>

<ul id="globalnav">
<li><a id="home" href="index.html"><span>Home</span></a></li>
<li><a id="surfing" href="surfing.html"><span>Surfing</span></a></li>
<li><a id="activities" href="activities.html"><span>Activities</span></a></li>
<li><a id="reservations" href="reservations.html"><span>Reservations</span></a></li>
<li><a id="about_us" href="about_us.html"><span>About Us</span></a></li>
<li><a id="spanish" href="spanish.html"><span>Z</span></a></li>
</ul>

</body>
</html>

coothead
zeech26
10-07-2009, 05:12 AM
Dear Coothead,
Thank you for your script!
It works great, except one thing that I cannot figure out.
All my buttons now act like links in the sense that when they have been visited, they remain in the visited state on the PNG header graphic.
Is there a way to have it always default to the dark menu bar, and only have the actual page have the button highlighted in its active state?
I also figured out what was causing my code to create the extra button in Firefox, it was the ul li tag which had padding, and was causing it to repeat the button for some odd reason.

ul li {font-family: Arial, Helvetica, sans-serif; font-size: 11px; padding: 0px 10px 0px 5px;}

Thank you again!
I have learned a lot! Let me know if you have a solution the the above problem with the visited link.
cheers!
zeech