Welcome to WebmasterWorld Guest from 54.198.62.217

Forum Moderators: not2easy

Message Too Old, No Replies

Link underline using border-bottom has problem

Seems to have padding I can't remove?

     
10:44 pm on Nov 15, 2006 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 29, 2006
posts:55
votes: 0


Hello,

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:-

#container{
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">
<html>

<head>

<title>Link Test 1</title>

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

<head>

<body>

<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.
</p>

</div><!--container-->

</body>

</head>

Please help?

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

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


I'd use

text-decoration: underline

instead of bottom borders.
6:46 am on Nov 16, 2006 (gmt 0)

New User

5+ Year Member

joined:Nov 12, 2006
posts:15
votes: 0


hi,
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,

yuval

9:48 pm on Nov 16, 2006 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 29, 2006
posts:55
votes: 0


Thanks Yuval.

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

Erdy.