homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
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?

 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?



 11:38 pm on Nov 15, 2006 (gmt 0)

I'd use

text-decoration: underline

instead of bottom borders.


 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,



 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