Hyperlink Hover Inconsistent in FF (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Edge -> Hyperlink Hover Inconsistent in FF (6/13/2006 15:41:23)

I have finally delved into CSS, using the linked sheet.

I only do sites as a hobby, and two are for race car drivers. Since their colors may change from year to year, I have decided to redo the sites using linked style sheets, to control text colors and table/line background colors. Real simple stuff for now. I am still controlling bold, italiced, and size as normal, since I only anticipate color/theme changes every so often.

Here is the style sheet code I have so far: 
P {font-family: Verdana, Arial; font-weight: normal; color: white;}

span.color1    {font-family: Verdana, Arial; font-weight: normal; color: #C0C0C0;} 
span.color2  {font-family: Verdana, Arial; font-weight: normal; color: #FF0000;} 
span.color3  {font-family: Verdana, Arial; font-weight: normal; color: #FFCC66;} 

.line1   { color: #FFCC66 } 

H1 {font-family: Verdana, Arial; font-weight: normal; color: #FF0000;}
H2 {font-family: Verdana, Arial; font-weight: normal; color: #FFCC66;}
H3 {font-family: Verdana, Arial; font-weight: normal; color: #C0C0C0;}

A:link {text-decoration: none; color: #FFCC66;}
A:active {text-decoration: none; color: #FFCC66;}
A:hover {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FFCC66;}

body { background-image: url(http://www.bennygordon.us/background19.gif) }
body { background-color: gray }

.bgcolor1 { background-color: #0B0B0B }


The hover feature is not working well in FF. Some work, others do not. They all work fine in IE. Please check for possible a reason(s) and solution(s).

The page is http://www.bennygordon.us/home.htm

All the gold words, except fo the "Current News" are hyperlinks and should hover red. The menu is from Opencube and works with both browers no problem.

There is also a horizontal line that is not appearing in FF, but does in IE. It is just below the [Top] hyperlink near the bottom of the page.

I am using a template, if that matters.

Thanks in advance for any help, Ed



rdouglass -> RE: Hyperlink Hover Inconsistent in FF (6/13/2006 15:57:25)

quote:

A:link {text-decoration: none; color: #FFCC66;}
A:active {text-decoration: none; color: #FFCC66;}
A:hover {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FFCC66;}


For starters, I think you need to change the order of these. Remember LoVe-HAte:

Link
Visited
Hover
Active

(and there was something about Focus in there too but I don't use it.):

That help any?



Edge -> RE: Hyperlink Hover Inconsistent in FF (6/13/2006 16:03:29)

quote:

That help any?


It sure is! That seems to have solved the intermittent hover feature in FF.

How about the missing line?
It is right above the big red words "USAR Hooter's ProCup Series Champion 2005"

Any ideas there?

Thanks for your prompt response rdouglass

Ed



rdouglass -> RE: Hyperlink Hover Inconsistent in FF (6/13/2006 16:15:31)

I'd suggest this:

Where you have this:

<hr width="740" size="1" class="line1">

change it to this:

<hr class="line1" />

and change your CSS to this:

.line1 { color: #FFCC66; width: 740px; height: 1px; }

That help?



Edge -> RE: Hyperlink Hover Inconsistent in FF (6/13/2006 16:30:03)

quote:

That help?


Yes, and no. The line now appears in FF, but is gray. The line still works in IE and is gold.

That's better than nothing for now. Thanks for your help and if anything comes to mind, please let me know.

Ed



Tailslide -> RE: Hyperlink Hover Inconsistent in FF (6/13/2006 17:14:03)

Browsers deal with hrs differently - If I remember rightly there's about 3 different variations.

I'd give this a try to cover all the different bases: 

hr {height: 1px;background-color: #FFCC66;color: #FFCC66;width:740ox;border: none;padding: 0;}



womble -> RE: Hyperlink Hover Inconsistent in FF (6/13/2006 17:18:24)

Well it doesn't seem to be anything to do with CSS inheritance - I've tried moving the styles around and it makes no difference. The fact though that it displays as you intended in IE and not in FF (more standards compliant) suggests it might be a coding problem. Checking out your site with the W3C validator, you've got quite a few validation errors - fixing them will hopefully solve the problem.



Edge -> RE: Hyperlink Hover Inconsistent in FF (6/13/2006 17:55:07)

Tailslide,
Your suggested code worked! But I fixed "740ox" to "740px"

Thanks for everyone's help, Ed



Tailslide -> RE: Hyperlink Hover Inconsistent in FF (6/13/2006 17:56:30)

Oops - sorry! Typo. That'll teach me to type one-handed!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625