underline color with CSS?
Softawayr
for example blue text with a red underline. When I use
{text-decoration:underline; color;red;}
this value is applied to the text as well as the underline. Is there a
way to specify ONLY the underline color? Note if you specify a color
for text in the <body>, that does not make a difference in the
selector I use for this ruleset, for example <P>. All advice much
appreciated:)
Richard Mahoney
"Softawayr" <Softa...@Yahoo.com> is believed to have written in message
news:65cdb30d.02050...@posting.google.com...
Try this, you can use a bottom-border command to achieve the same effect -
a
{
color: #000088;
background-color: transparent;
text-decoration: none;
border-bottom: 1px transparent hidden; /* Makes it invisible until the
mouse is hovered over it */
}
a:hover
{
color: #000000;
background-color: transparent;
text-decoration: none;
border-bottom: 1px #88000 solid; /* The 1px bit means that it's 1
pixel in width */
}
Copy and Paste this to try it out, this is a much more flexible way of doing
it because you can change the thickness of the bottom (or top, left and
right) borders, the style (solid, dotted, dashed, outset, double etc...) and
the colour...
Hope this helps.
Richard Mahoney.
And now for a shameless plug ;
http://www.the-chaos-engine.20m.com
I use these techniques on my site above...
Softawayr
I tried your suggestion, and all I got was the color change in the
text with the mouseover, and no underline at all. I'm using IE5.5, I'm
not sure why it's not working.
Richard Mahoney
"Softawayr" <Softa...@yahoo.com> wrote in message
news:ee5b932d.02051...@posting.google.com...
> I tried your suggestion, and all I got was the color change in the
> text with the mouseover, and no underline at all. I'm using IE5.5, I'm
> not sure why it's not working.
Hmm, try this - it's the code cut and pasted exactly as it appears in my
stylesheet on my site. Seems to work fine in IE and NS 6.2...
a
{
color: #008800;
text-decoration: none;
background-color: transparent;
border-bottom: 1px transparent hidden;
}
a:hover
{
color: #008800;
background-color: transparent;
text-decoration: none;
border-bottom: 1px #008800 dashed;
}
Softawayr
Yes! Thank you! Your example shows the link with a dashed same-color
underline onmousover.(in IE5.5) I just changed the name of the color
on the border-bottom, and got a different color, which is what I was
looking for. Thank you! Not only did you answer my question, but gave
me the added bonus of discovering the transparent value.
I looked again at your previous example, as I wondered why it did
not show the underline, and I noticed that in the a.hover, I had
copied your "border-bottom: 1px #88000 solid;" (Small error, not a
hex, it's 5 digits, which threw me off because I didn't notice it.) So
that seems why it didn't work for me. And thanks for the tips on
styles of the borders as well.
ty:)