SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu works in Safari, but messed up in Firefox

    Hi,

    I am brand new to all of this and not sure how to go about fixing browser compatibility issues.

    My menu items are supposed to change to a white background with a bottom border on hover, which shows up correctly in Safari but not in Firefox.

    I've also been trying to figure out how to maintain the hover state for the current page. I've tried many things, but I end up creating new problems instead.

    Any help is appreciated, thank you!

    Here's the link:

    http://www.pittsforddesign.com/clien...ics/index.html

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,593
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, which version of FF are you having this problem with? I have FF9 and Chrome(same rendering engine as Saffy) and it's identical

    As for the current page issue, say you have this. <li>home</li>.

    On the home page <li> just add class="current" or something like that. Then in the CSS style that li to have particular styles. It will only apply to that <li> and will basically act as a current page .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Likewise, it works fine for me in Firefox. Make sure to reload the page to refresh your browser cache.

    As Ryan says, there are various ways to set the link to its hover state when the page is selected. There are fancy ways to do it, but you could do it manually, as Ryan said, by adding class="current" to the the <a>. For example, on the About page, add this:

    Code:
    <a href="about.html" class="current">About</a>
    And then add this to your style sheet:

    Code:
    a:active, a.current {
        background-color: #FFFFFF;
        border-bottom: thick solid #435E7B;
        color: #435E7B;
        height: 25px;
        text-decoration: none;
        text-transform: uppercase;
        width: 160px;
    }

  4. #4
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! Thank you! That was indeed the problem. I have a feeling things are going to going a lot smoother for me now that I have some support! Thank you SO much!

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I knew there had to be a simple way to do it, thanks so much for shedding some light! I'm up and running again!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Glad we could help! Ask as many questions as you like.


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
  •