Is there a way to make the link one color and the underline another color?

a {
text-decoration: none;
color: #0000FF;
border-bottom: 1px solid #FF0000;
}
Replace the hex values as needed.

yeah that would work, why didnt I think of that?

Thanks

Hey - Thanks for that response. I was searching the web for this scenario and found your guys thread - It saved me a some time and will give me the effect I need to "underline" the link in the color I choose.

What a slick solution!

Thanks !!

BTW - I registered in this board just to say thanks for the solution!

Did I say THANKS!

You're welcome, Chad. But feel free to participate in the other threads too.

I used this method on a site, but I ran into a snag. This also underlines images that are linked.

at first I tried this:

a img, a:link img {
border:0;
}

But that does not work because the underline is happening to the "a:link" not the image inside the link. I came up with a good temporary solution:

a img, a:link img {
border:0;
margin-bottom:-4px; /* this hides the 1px border under a:link */
}

This would obviously not work on an icon with a transparent background. Currently there aren't any images on the site with transparent backgrounds, but I still feel that this is a hack and not a real solution to the problem.

Is there a selector that will just target the text inside the link? (to apply the underline)

Please don't give suggestions like "wrap all of your text links in a span tag or a div tag." The site is several hundred pages deep and the client controls the site with a CMS.

Thanks for your help!

img {
border: 0;
}

LOL joder, nice joke.

Ok, found the spec for text-underline-color in CSS3, but that would probably mean leaving out MicroSnot Internet Destroyer.

What is so funny about it?
http://css-discuss.incutio.com/?page=LinkedImages

Originally Posted by danfinney

But that does not work because the underline is happening to the "a:link" not the image inside the link.

Sorry, thought you were making a joke. Didn't know you were serious.

Just tested the "margin-bottom:-4px" in Internet Destroyer. No dice. That solution only holds up in Safari & Firefox. Does anyone out there have a solution that will make this work with linked images? ADAM? You are being awfully quiet. Come on, put that massive Talkupation to work!

a.no-border {
     border:  none;
}
img {
     border:  none;
}
...
<a href="something" class="no-border"><img src="your image" blah blah blah /></a>

It's not pretty, but it should work.

ADAM? You are being awfully quiet. Come on, put that massive Talkupation to work!

It's only been 20 hours or so as I write this and it is a weekend of course, and occasionally we do have a life

Ain't that typical !!!!

Yeah, your timing sucks.

Seriously, I was out all day Saturday. That's my excuse.

What is this life that you speak of?

Originally Posted by ADAM Web Design

<a href="something" class="no-border"><img src="your image" blah blah blah /></a>

It's not pretty, but it should work.

If this were a static website, I would be all over it. This site is hundreds of pages deep and the client uses a CMS. Looks like I will have to use a different effect until CS3 specs are supported by IE 22.

Sorry, Dan. I got nothin'.