Results 1 to 3 of 3

Thread: BUMP-NAV BAR problem only in Firefox?!? REPEATED BUTTON-Help

  1. #1
    Join Date
    Mar 2008
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default BUMP-NAV BAR problem only in Firefox?!? REPEATED BUTTON-Help

    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; }

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there zeech26,

    this is how I would do it...
    Code:
    
    <!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

  3. #3
    Join Date
    Mar 2008
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

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
  •