Styling link underlines 
November 12th, 2008, 01:45 PM
| | |
I've seen websites where the link underline is a different colour to the
link text. I've also seen links with dotted underlines (see the hover
effect on the 'Change' and 'All Microsoft Sites' links at the top right
of this page for an example: http://support.microsoft.com/kb/253503).
Do these techniques involve background image/border hacks or can it be
done by directly styling the underline using CSS?
Thanks | 
November 12th, 2008, 02:05 PM
| | | | re: Styling link underlines
On 2008-11-12, JD <user@example.orgwrote: Quote:
I've seen websites where the link underline is a different colour to the
link text. I've also seen links with dotted underlines (see the hover
effect on the 'Change' and 'All Microsoft Sites' links at the top right
of this page for an example: http://support.microsoft.com/kb/253503).
>
Do these techniques involve background image/border hacks
| Yes. Quote: |
or can it be done by directly styling the underline using CSS?
| No. You just get text-decoration: underline, which gives you a solid
line the same colour as the text. | 
November 12th, 2008, 03:25 PM
| | | | re: Styling link underlines
Ben C schreef: Quote:
On 2008-11-12, JD <user@example.orgwrote: Quote:
>I've seen websites where the link underline is a different colour to the
>link text. I've also seen links with dotted underlines (see the hover
>effect on the 'Change' and 'All Microsoft Sites' links at the top right
>of this page for an example: http://support.microsoft.com/kb/253503).
>>
>Do these techniques involve background image/border hacks
| >
Yes.
| How do you tell? Quote: Quote: |
>or can it be done by directly styling the underline using CSS?
| >
No. You just get text-decoration: underline, which gives you a solid
line the same colour as the text.
| You can do
a:hover {
color: yellow;
border-bottom: dotted;
}
Which is what the Microsoft seems to do to me. (with classes of course,
and also for :active and :focus).
Cheers, H.
--
Hendrik Maryns http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers: http://www.catb.org/~esr/faqs/smart-questions.html | 
November 12th, 2008, 03:55 PM
| | | | re: Styling link underlines
Ben C wrote: Quote:
On 2008-11-12, JD <user@example.orgwrote: Quote:
>I've seen websites where the link underline is a different colour to the
>link text. I've also seen links with dotted underlines (see the hover
>effect on the 'Change' and 'All Microsoft Sites' links at the top right
>of this page for an example: http://support.microsoft.com/kb/253503).
>>
>Do these techniques involve background image/border hacks
| >
Yes.
| I wouldn't call using the border properties a hack, though, but an alternative to the text-decoration property.
--
Berg | 
November 12th, 2008, 03:55 PM
| | | | re: Styling link underlines
On 2008-11-12, Hendrik Maryns <gtw37bn02@sneakemail.comwrote: Quote:
Ben C schreef: Quote:
>On 2008-11-12, JD <user@example.orgwrote: Quote:
>>I've seen websites where the link underline is a different colour to the
>>link text. I've also seen links with dotted underlines (see the hover
>>effect on the 'Change' and 'All Microsoft Sites' links at the top right
>>of this page for an example: http://support.microsoft.com/kb/253503).
>>>
>>Do these techniques involve background image/border hacks
| >>
>Yes.
| >
How do you tell?
| I just know you can't do it with text-decoration. Therefore it must be
done some other way, and a border is the obvious one. Quote: Quote: Quote: |
>>or can it be done by directly styling the underline using CSS?
| >>
>No. You just get text-decoration: underline, which gives you a solid
>line the same colour as the text.
| >
You can do
>
a:hover {
color: yellow;
border-bottom: dotted;
}
| Yes that sort of thing. | 
November 12th, 2008, 05:05 PM
| | | | re: Styling link underlines
Ben C wrote: Quote:
On 2008-11-12, Hendrik Maryns <gtw37bn02@sneakemail.comwrote: Quote:
>Ben C schreef: Quote:
>>On 2008-11-12, JD <user@example.orgwrote:
>>>I've seen websites where the link underline is a different colour to the
>>>link text. I've also seen links with dotted underlines (see the hover
>>>effect on the 'Change' and 'All Microsoft Sites' links at the top right
>>>of this page for an example: http://support.microsoft.com/kb/253503).
>>>>
>>>Do these techniques involve background image/border hacks
>>Yes.
| >How do you tell?
| >
I just know you can't do it with text-decoration. Therefore it must be
done some other way, and a border is the obvious one.
> Quote: Quote:
>>>or can it be done by directly styling the underline using CSS?
>>No. You just get text-decoration: underline, which gives you a solid
>>line the same colour as the text.
| >You can do
>>
>a:hover {
> color: yellow;
> border-bottom: dotted;
>}
| >
Yes that sort of thing.
| Can you put a border on an inline element like that? | 
November 12th, 2008, 05:05 PM
| | | | re: Styling link underlines
Ben C schreef: Quote:
On 2008-11-12, Hendrik Maryns <gtw37bn02@sneakemail.comwrote: Quote:
>Ben C schreef: Quote:
>>On 2008-11-12, JD <user@example.orgwrote:
>>>I've seen websites where the link underline is a different colour to the
>>>link text. I've also seen links with dotted underlines (see the hover
>>>effect on the 'Change' and 'All Microsoft Sites' links at the top right
>>>of this page for an example: http://support.microsoft.com/kb/253503).
>>>>
>>>Do these techniques involve background image/border hacks
>>Yes.
| >How do you tell?
| >
I just know you can't do it with text-decoration. Therefore it must be
done some other way, and a border is the obvious one.
> Quote: Quote:
>>>or can it be done by directly styling the underline using CSS?
>>No. You just get text-decoration: underline, which gives you a solid
>>line the same colour as the text.
| >You can do
>>
>a:hover {
> color: yellow;
> border-bottom: dotted;
>}
| >
Yes that sort of thing.
| Ah, ok, I see, but I think it is a nice solution and wouldn’t call it a
hack either. There is a visible difference though: underline is closer
to the text than border (by default), since the border is below the
descenders, whereas the underline goes through them. You can see this
on the site the OP mentioned.
H.
--
Hendrik Maryns http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers: http://www.catb.org/~esr/faqs/smart-questions.html | 
November 12th, 2008, 06:35 PM
| | | | re: Styling link underlines
On 2008-11-12, Hendrik Maryns <gtw37bn02@sneakemail.comwrote: Quote:
Ben C schreef: Quote:
>On 2008-11-12, Hendrik Maryns <gtw37bn02@sneakemail.comwrote: Quote:
>>Ben C schreef:
>>>On 2008-11-12, JD <user@example.orgwrote:
>>>>I've seen websites where the link underline is a different colour to the
>>>>link text. I've also seen links with dotted underlines (see the hover
>>>>effect on the 'Change' and 'All Microsoft Sites' links at the top right
>>>>of this page for an example: http://support.microsoft.com/kb/253503).
>>>>>
>>>>Do these techniques involve background image/border hacks
>>>Yes.
>>How do you tell?
| >>
>I just know you can't do it with text-decoration. Therefore it must be
>done some other way, and a border is the obvious one.
>> Quote:
>>>>or can it be done by directly styling the underline using CSS?
>>>No. You just get text-decoration: underline, which gives you a solid
>>>line the same colour as the text.
>>You can do
>>>
>>a:hover {
>> color: yellow;
>> border-bottom: dotted;
>>}
| >>
>Yes that sort of thing.
| >
Ah, ok, I see, but I think it is a nice solution and wouldn’t call it a
hack either.
| I wouldn't either, but I suppose you could argue that it's a hack
because you're using a border to do underlining. Quote:
There is a visible difference though: underline is closer to the text
than border (by default), since the border is below the descenders,
whereas the underline goes through them. You can see this on the site
the OP mentioned.
| Yes. The CSS specification doesn't define exactly where the bottom
border on an inline box goes, but most browsers put it at the font's
maximum descent. A bit too low for an underline really which usually
cuts through descenders. | 
November 12th, 2008, 06:35 PM
| | | | re: Styling link underlines
On 2008-11-12, JD <user@example.netwrote: Quote:
Ben C wrote: Quote: |
>On 2008-11-12, Hendrik Maryns <gtw37bn02@sneakemail.comwrote:
| | [...] Quote: Quote: Quote:
>>a:hover {
>> color: yellow;
>> border-bottom: dotted;
>>}
| >>
>Yes that sort of thing.
| >
Can you put a border on an inline element like that?
| Yes there's no problem with that. | 
November 12th, 2008, 08:45 PM
| | | | re: Styling link underlines
In article <6o0c7bF1880mU1@mid.individual.net>,
Bergamot <bergamot@visi.comwrote: Quote:
Ben C wrote: Quote:
On 2008-11-12, JD <user@example.orgwrote: Quote:
I've seen websites where the link underline is a different colour to the
link text. I've also seen links with dotted underlines (see the hover
effect on the 'Change' and 'All Microsoft Sites' links at the top right
of this page for an example: http://support.microsoft.com/kb/253503).
>
Do these techniques involve background image/border hacks
| Yes.
| >
I wouldn't call using the border properties a hack, though, but an
alternative to the text-decoration property.
| A hack is relative to a task. If you just know someone used a hammer for
something or or other (but not what) under the bonnet of a car, a purist
mechanic would not disapprove. There are some things for which a hammer
on an engine is quite the right tool. But if he knew it was for driving
in an unimportant bolt (whose thread was damaged), he would raise an
eyebrow or wince. That raised eyebrow or that wince would mean, to those
who knew about these things, that the thread should be cleaned up (and
recut if necessary) and a spanner used.
If you cannot use text-decoration to underline a link to suit your
purpose, and you use border instead, there must be some slight, almost
imperceptible use of the muscles that operate the eyebrows or power a
wince.
It might be different for earthlings, some beings have logs that
register all 'muscle' activity, however slight.
--
dorayme | 
November 13th, 2008, 10:45 AM
| | | | re: Styling link underlines
On 12 Nov, 14:36, JD <u...@example.orgwrote: Quote:
I've seen websites where the link underline is a different colour to the
link text. I've also seen links with dotted underlines (see the hover
effect on the 'Change' and 'All Microsoft Sites' links at the top right
of this page for an example:http://support.microsoft.com/kb/253503).
| I am confused. What do an dotted underline means? To some users this
line looks exactly the same as the green dotted underline they are
using in their own help system.
Browsers are also rendering elements like abbr and acronym with a
dotted underline.
I don't think it is wise make your own conventions like that. Quote:
Do these techniques involve background image/border hacks or can it be
done by directly styling the underline using CSS?
| On anchor links an solid underline is the convention. |  |
Similar Threads | | Thread | Thread Starter | Forum | Replies | Last Post | | Form problem and Firefox | Daniel Kaplan | answers | 20 | April 7th, 2006 07:45 PM | | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 225,662 network members.
|