Thanks for your reply. Actually, I'm doing my underline using this:
.linksprincipais#navigation ul li a:hover{
border-bottom: 10px solid black;
}
I don't want an underline of 1 px, what I want is 1px distance between the
navigation button and the underline (when we mouse over the button).
Here: http://www.cantinho.org/test5.html I have the underline immediately
after the button, but I'd like to put one 1px difference between the button
(green box) and the black bar underline (so that you can see a 1px white
line between the button and the underline).
Thanks a lot,
Márcio
Ps- I was unable to see the link to the test page on your other e-mail.
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Jukka K. Korpela
Sent: quinta-feira, 6 de Novembro de 2008 17:21
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Separate an underline from the text underlined
MEM wrote:
> Is there a way to separate and underline from his text using CSS?
If I understand you correctly, you would like to put the underline that you
get with text-decoration: underline (either explicitly or via the use of
default rendering for links or <u> or <ins>) at a lower position than it is
normally placed. I can understand the need for that especially when the text
contains letters with descenders (j, g, þ etc.) or even underline "_"
characters.
There's nothing for that in CSS as currently defined and implemented, and
not even a draft worth mentioning. (The very sketchy CSS 3 Text draft
mentions text-underline-position without saying much of what it might mean.)
You can however circumvent this by using a bottom border instead of an
underline. This also lets you use different line styles, colors, and widths.
On the downside, it might then be too far from the text. And although it is
easy to make the distance larger, using padding-bottom, there's no direct
way to make it smaller, unless I'm missing something. You would need
auxiliary markup for reducing the distance.
You could use something like
<span class="link"><a href="foo">foog</a></span>
with
span.link a { text-decoration: none; margin-bottom: -1px; }
span.link { border-bottom: solid 1px blue; }
but it gets rather awkward.
So why not consider the simple move of _removing_ the underline on
mouseover, e.g. with
a:hover { text-decoration: none; }
since the underline has done its job when the user has recognized a link and
moved the pointer over it?
> Normally a underline places itself after the li element, and we can
> change this by using a padding on a:hover property right?
Pardon? You lost me. URL?
> But that "drags" de li background, and the intention was to detach the
> underline and put it one pixel lower so that, between the text and the
> underline we have a 1px white space. Is this possible using CSS?
The question is a bit of a mystery. Do you mean that you have
<ul>
<li><a href="...">foog</a></li>
...
</ul>
and you have tried something like
ul a:hover { padding-bottom: 1px; }
First of all, a one-pixel change is more probably either annoying or
unnoticeable rather than useful. Second, the CSS 2.1 draft says:
"User agents are not required to reflow a currently displayed document due
to pseudo-class transitions. For instance, a style sheet may specify that
the 'font-size' of an :active link should be larger than that of an inactive
link, but since this may cause letters to change position when the reader
selects the link, a UA may ignore the corresponding style rule."
And this seems to be what IE 7 does, for example. Besides, it would not move
the underline, since the underline is part of the content and the padding
appears below it.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
