Can anyone solve this one?

[jpduckman]

Hi. Here's my problem:

<a style="text-decoration:none" href="..."> <font onMouseOver="this.style.color='#FF9900'" onMouseOut="this.style.color='#003399'" face="Arial" color="#003399">...</font></a>

The onMouseOver and onMouseOut attribute of the <font> tag does not work in some browsers. However it achieves the desired result: the text is dark blue in color and is highlighted orange when you hover over it. It goes back to dark blue when you move the mouse out.

<font face="Arial" color="003399"> <a style="text-decoration:none" onMouseOver="this.style.color='#FF9900'" onMouseOut="this.style.color='#003399'" href="...">...</a></font>

In this above scenario the text is blue to begin with(the normal blue of any link) and highlights orange when you hover over it. It becomes dark blue when you move the mouse out. Everything works normally except at the start when it is bright blue.

If I change things so that the <font> tag is on the inside of the <a> tag the text is dark blue but will not highlight orange.

How do i achieve the result of the first example and be browser-friendly at the same time?

Thanks

[Daniel T]

Don't use JavaScript on font tags. Actually, don't use font tags at all. use spans.
<a style="text-decoration:none" href="..."> <span onMouseOver="this.style.color='#FF9900'" onMouseOut="this.style.color='#003399'" style="font-family: Arial; color: #003399">...</span></a>
-Dan

[Paul Jr]

How about we use CSS instead of either of those.

<style type="text/css">
a:link, a:visited {
font-family: arial, verdana, sans-serif;
color: #039;
text-decoration: none;
}
a:hover {
color: #F90;
}
</style>
… … …
<a href="" title="">Link; click me</a>

It is simple, easy, logical, and very browser-friendly — more so than JavaScript in this situation.

[jpduckman]

You have defined the style but how does one incorporate it in the link?

[Daniel T]

Originally posted by jpduckman
You have defined the style but how does one incorporate it in the link? It already is. Copy and paste that code and see for yourself...

[Paul Jr]

As Dan said, the styles have been applied. Those styles will affect every link on the page. To affect certain links, you can use classes, IDs, descendant selectors, and many more. For a nice big ol’ list of selectors, go <here (http://www.w3.org/TR/REC-CSS2/selector.html)>

You can learn about CSS <here, at W3schools.com (http://www.w3schools.com/css/)>

[jpduckman]

Thanks, it all works now.
Jiby

[Paul Jr]

Originally posted by jpduckman
Thanks, it all works now.
Jiby
Awesome. Glad you got it working. :)