Forum Moderators: not2easy
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?
text-decoration: underline
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
I see what you mean.
The border goes tight to the decenders (even if there isn't any!)
Erdy.
