CSS Setting Underline link color different

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
blade_922
Forum Contributor
Posts: 132
Joined: Wed Jul 12, 2006 4:57 pm

CSS Setting Underline link color different

Post by blade_922 »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Hey guys,

My links on my site are blue with a blue underline on every link. On hover the text background turns blue and the text and underline turns white. See what i mean?

Ok what im trying to do is set the underline color something different. I want underline color to be #cccccc at all times and keep the links all blue.


Heres what i got

[syntax="css"]

a:link, a:visited {
	color: #330099; text-decoration: none;
	font-weight: bold;
        text-decoration: underline;
}





a:hover {
	color: #ffffff;	text-decoration: none;
	font-weight: bold;
        background-color: #000099;
        text-decoration: underline;

}

Any ideas


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Try

Code: Select all

a:link {text-decoration:none;border-bottom:1px solid #ccc;}
and then figgle a little with margin/padding/line-height to get everything lined up well.
blade_922
Forum Contributor
Posts: 132
Joined: Wed Jul 12, 2006 4:57 pm

Post by blade_922 »

But see with using Border, when you hover over the text/link it doesnt take into account the border line, unlike with text decoration.

Any other suggestions?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Maybe I don't understand what you want. You said you wanted the border/underline to always stay the same color. If you set the color of links to change on hover, the underline color changes too. (the text-decoration property inherits its color from the color on the pseudo-class a:link)

So that's why the trick to use border instead of text-decoration works. You can set/change the color of the border - seperately - from the color of the link it self.

Code: Select all

a:link {
 color:blue;
 text-decoration:none;
 border-bottom:1px solid green;
}
a:hover {
 color:purple;
 text-decoration:none;
 border-bottom:1px solid pink;
}
p.s. I wouldn't recommend this color palette to anyone ;)
Post Reply