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/