Menu works in Safari, but messed up in Firefox

HTML & CSS
1

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.:confused:

Any help is appreciated, thank you!

Here’s the link:

http://www.pittsforddesign.com/clients/domestics/index.html

2

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 :).

3

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:


<a href="about.html" [COLOR="#FF0000"]class="current"[/COLOR]>About</a>

And then add this to your style sheet:

a:active[COLOR="#FF0000"], a.current[/COLOR] {
    background-color: #FFFFFF;
    border-bottom: thick solid #435E7B;
    color: #435E7B;
    height: 25px;
    text-decoration: none;
    text-transform: uppercase;
    width: 160px;
}
4

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

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

Glad we could help! Ask as many questions as you like. :slight_smile: