Welcome to WebmasterWorld Guest from 54.234.8.146

Forum Moderators: not2easy

Message Too Old, No Replies

Link underline using border-bottom has problem

Seems to have padding I can't remove?

     

erdy

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

5+ Year Member



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?

swa66

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

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



I'd use

text-decoration: underline

instead of bottom borders.

yuval_raz

6:46 am on Nov 16, 2006 (gmt 0)

5+ Year Member



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

erdy

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

5+ Year Member



Thanks Yuval.

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

Erdy.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month