HTML - need help with the <a href> tag in Mozilla Firefox

defenstration · 16-04-2007 10:37PM #1

The links I put up on my website look grand in Internet Explorer - the text and line underneath it remains navy regardless of whether or not the link has been used and there is no border around the link.

It is only when I look at the site in Mozilla Firefox that it looks a bit weird - the text of the link remains navy regardless of whether it has been used or not, but the line underneath the text is light blue and only turns navy after the link has been accessed. Likewise, if I have an image as a link, a line appears under the image, which is blue originally and turns navy when the link is accessed. In Internet Explorer, there is no line underneath the image, which is the way I want it to be.

The code I use for a regular link is:
<A href="#fixtures">
Click here to see a list of fixtures

</A>

The code I use for an image link is:
<A href="http://www.google.com" target="_blank">
<IMG src="googlelogo.jpg" border=0> Click here to access Google
</A>

I want to get it so that in Mozilla Firefox, the link, as well as the line underneath it, is always navy. And I also want to take away the line that appears underneath an image link - this only happens in Mozilla Firefox, not in IE.
Any help appreciated, cheers.

DonkeyStyle \o/ · 16-04-2007 10:45PM

CSS would sort everything out here.
Have a read of this:
http://www.projectseven.com/tutorials/css/pseudoclasses/index.htm
Definitely worth looking into CSS... gives you far more control over stuff like this.

Goodshape · 16-04-2007 10:47PM

No offence, but the code is dreadful. Do a google for 'css style sheets' and start reading.

This :

<A href="#fixtures"><FONT color="navy">
<B>Click here to see a list of fixtures
</B>
</FONT></A>

should look like this :

<a href="#fixtures" style="font-weight : bolder; color : navy;">Click here to see a list of fixtures</a>

Giblet · 16-04-2007 10:48PM

<html>
<head>
<style>
a
{
color:#000080;
text-decoration:none;
}

a:hover
{
text-decoration:underline;
}
</style>
</head>
<body>
<a href="#fixtures">
<b>Click here to see a list of fixtures
</b>
</a>


<a href="http://www.google.com" target="_blank">
<img src="googlelogo.jpg" border=0/><br/>Click here to access Google
</a>
</body>
</html>

Have a look at CSS and XHTML standards. Should help you in the future.

muckwarrior · 16-04-2007 10:48PM

Go learn CSS!

Not trying to be smart but thats what you need for this job. CSS should generally be used for presentation instead of horrible font tags etc. Here's something to point you in the right direction.

Goodshape · 16-04-2007 10:54PM

Giblet - are you sure you're allowed a tag inside an <a> ?

I think it's best practice not to do that. Use css' font-weight property instead.

(oohh.. look at us all with our mad skilz :P ...not to worry OP, it's a learning process. but really, CSS is wonderful once you get the basics)

Giblet · 16-04-2007 10:55PM

Goodshape wrote:

Giblet - are you sure you're allowed a tag inside an <a> ?

I think it's best practice not to do that. Use css' font-weight property instead.

(oohh.. look at us all with our mad skilz :P ...not to worry OP, it's a learning process. but really, CSS is wonderful once you get the basics)

Tbh I wasn't even looking, but yeah, you should set weights.