homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Link underline using border-bottom has problem
Seems to have padding I can't remove?

5+ Year Member

Msg#: 3157898 posted 10:44 pm on Nov 15, 2006 (gmt 0)


I have a problem with using border-bottom as a link underline.
I can't get the line right up to the bottom of the text.
I have tried to remove the padding-bottom on the a:hover element but this doesn't work, their seems to be something else there preventing me from making the border go tight to the bottom of the text.
Is this possible?

My CSS is as follows:-

margin: 30px 0 0 0;

#container p{
text-align: center;
padding-bottom: 5px;

#container a:link, a:visited{
text-decoration: none;
color: black;

#container a:hover, a:active{
padding: 0px;
border-bottom: 1px solid black;

My HTML is as follows:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<title>Link Test 1</title>

<link rel="stylesheet" type="text/css" href="link1css.css"/>



<div id="container">

<p>Some text that will include a <a href="http://www.garthwest.com">link</a> which will be
stylized using basic CSS techniques.




Please help?



WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3157898 posted 11:38 pm on Nov 15, 2006 (gmt 0)

I'd use

text-decoration: underline

instead of bottom borders.


5+ Year Member

Msg#: 3157898 posted 6:46 am on Nov 16, 2006 (gmt 0)

the problem you have encountered comes from the fact that an element's border starts at the "end" of the element's content section. this end includes the space given for the "big" letters such as 'j', 'g', etc'...
the text decoration property doesn't have the same problem as it doesn't include the big letter's spacing into account.

for a simple test case just write a link that has some of the "big" letters, without any styling, and see where the line draws.you will see that the line will almost touch the letters at their bottom.

hope this helps,



5+ Year Member

Msg#: 3157898 posted 9:48 pm on Nov 16, 2006 (gmt 0)

Thanks Yuval.

I see what you mean.
The border goes tight to the decenders (even if there isn't any!)


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved