css link decoration

i need help on removing decoration for images and other elements

[joannebeth]

Hello everyone!
I wanted to know if someone can please help me with CSS links.
My problem is that I had make all links have an dashed blue underline
by using this code:

a {
font-family: verdanda, arial, sans-serif;
font-size: 9pt;
color: #000000;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #00bff3
}
a:hover {
color: #00bff3;
}

But I this code makes all images underlined.
I don't want them underlined. So i used this code.
image a {
text-decoration: none
border-bottom-width: 0px;
border-bottom-style: none;
}
image a:hover {
text-decoration: none
border-bottom-width: 0px;
border-bottom-style: none;
}

It does not work.
Basically, there are some elements that I do not want to have
underlined, and I just want to know how to target those element and
the code for them not to be underlined

[Dabrowski]

Your problem is here:

image a {

That would imply that the <a> was inside the <img>, which is obviously impossible for starters.

Try this:

a img {
border: 0;
}

[Dabrowski]

If you wanted to remove decoration from any element within the <a>, I think you could use:

a * {
border: 0;
}

But I'm hoping a guru can confirm that one. I'm always a bit suspicious of the *.

[Setek]

If you wanted to remove decoration from any element within the <a>, I think you could use:

a * {
border: 0;
}

But I'm hoping a guru can confirm that one. I'm always a bit suspicious of the *.

You can use the Universal Selector like that, but using that selector seems a bit overkill considering the scope, especially since it won't work :)

It does not work.
Basically, there are some elements that I do not want to have
underlined, and I just want to know how to target those element and
the code for them not to be underlined

No, it won't work, and neither will

a img { ... }

because the border isn't on the image (well, there is one, but not the one you're thinking of,) it's on the anchor :)

Basically, what you're after is a parent selector: you want to cascade upwards (if this anchor has an image inside, I want to do something different with the anchor.) This is not possible with CSS, you can only cascade downwards (if this anchor has an image inside, I want to do something to the image.)

You will have to apply a class to every anchor that has an image inside of it:

a { border-bottom: 1px dashed #00bff3; }
a.image-frame { border-width: 0; }
a.image-frame img { border-width: 0; }

You'll notice I shortened your:

border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #00bff3

... to a single line, for optimisation.

Another way to combat this is to avoid using a border on your anchors, and instead use

text-decoration

:

a { text-decoration: underline; }
a img { border-width: 0; }

Which is good, no class requirement... though you will realise there is less customisability (it will show up solid and the same colour as anchor text, and if the anchor is block-level, will still display underneath every line of text.)

[IndiaMaster]

Hi,

I never use a style with name "a" as it effects every anchor tag. I use a style with any other name and whenever I need it I include it like <a href="#" class="someclass">Text</a>. So I easily remove the class attribute when I don't need it.

[Setek]

I never use a style with name "a" as it effects every anchor tag.

Yes, but that might very well be the point?

I use a style with any other name and whenever I need it I include it like <a href="#" class="someclass">Text</a>. So I easily remove the class attribute when I don't need it.

While this might be a decent solution in this instance (I outlined it in my previous reply,) that doesn't mean it's a good idea in every case.

It usually leads to classitis (overuse of classes) if you're not careful. This slows render time, as well as being messy and usually non-semantic. A couple of questions I would ask myself are:

1. Why would it be done with a class?
   
2. Can it be done in another way?

Just because you can, doesn't mean you should.

[Dabrowski]

No, it won't work, and neither will a img { ... } because the border isn't on the image (well, there is one, but not the one you're thinking of,) it's on the anchor :)

So it is! Ignore me, I'm an idiot. Well, it was late....uhhh, almost 7pm? ;)

I never use a style with name "a" as it effects every anchor tag

This is absolutely the point, when I'm writing a site it's pretty much always one of the first things I do! I haven't done a site yet where IE's blue/magenta links look good. I don't even know what colours FF uses by default.

[Ingolemo]

It might also be a good idea to question why you want to put an image inside an anchor in the first place.

While I'm sure there are a great many valid reasons why someone would want to do so, it seems to me that most of the time they would be better served, semantically speaking, by doing one of the following (depending on situation):

• Use a background image on the anchor.
• If the image has some describing text, then put the link somewhere in there.
• Move the link into the main body of the text rather than having it on the image.

[edited by: Ingolemo at 7:20 pm (utc) on May 22, 2007]

[Dabrowski]

It might also be a good idea to question why you want to put an image inside an anchor in the first place.

Ummm, no. I think that's perfectly reasonable. I'm sure he has alternate text links, but it doesn't hurt to put links where people might actually click.

For example, a retail site might take you to product information when you click on it's image.

[Setek]

Hmm yeah, I agree with Dabrowski, sorry :)

A background image on an anchor involves all kinds of problems, like floating, hiding the text, etc.

A user with images replaced by alt attributes will see a link with text just fine. But CSS image replacement with images turned off is, well, horrid, unless you have extra markup within the anchor purely for the presentation of the image.