3 replies [Last post]
stewy
Offline
newbie
Last seen: 18 years 45 weeks ago
Joined: 2004-01-15
Posts: 1
Points: 0

The problem i'm having is that when I use an image as a link it does not use the link style specified in my css. Instead it defaults to the IE blue and red colors. It works perfectly in Netscape.

Here's part of the page

<a class="style1" href="#" onClick="document.misc.src='images/misc01.jpg';form.description.value=(description[0]);"><img src="images/tn-misc01.jpg" height="50"></a>

<a class="style1" href="#" onClick="document.misc.src='images/misc02.jpg';form.description.value=(description[1]);"><img src="images/tn-misc02.jpg" height="50"></a>

and here's the snippit of css that applies to these links

a.style1 {text-decoration: none; }
a.style1:link {color:#A60806; }
a.style1:visited {color:#A60806; }
a.style1:active {color:#000000; text-decoration: underline; }
a.style1:hover {color: red; text-decoration: underline; }

Thanks in advance to anyone who posts.

Bill Posters
Offline
Regular
UK
Last seen: 18 years 50 weeks ago
UK
Joined: 2003-12-15
Posts: 9
Points: 0

Re: Problem using images as links.

Fwiw, change the running order of the pseudo-classes to:

…:link
…:visited
…:hover
…:active

Some browsers are more pedantic than others and require the running order to be correct in order for all parts to work properly.

- - -

What part of the image is not being coloured as you want it?
There's nothing in your css snippet that would even apply to an image link.
text-decoration and color both apply to text only.

Offline
newbie
Last seen: 18 years 9 weeks ago
Joined: 2004-09-26
Posts: 1
Points: 0

How do you disable decoration on img src links?

How do you remove the color decoration and all other decorations from
images as opposed to text?

Bill Posters
Offline
Regular
UK
Last seen: 18 years 50 weeks ago
UK
Joined: 2003-12-15
Posts: 9
Points: 0

Problem using images as links.

To remove the border that some browsers place around img links, add the following css to you css file.

a img {
border: none;
}