On 6/25/12 1:09 AM, meera kibe wrote:
Hi i wanted to style the underline on a anchor with a dotted red. Read an
article saying i could do
a:hover{ text-decoration:none; border-bottom: 1px dotted red; }
but there is a wide gap between the text and the bottom-border. how do i
remove that
The gap is likely caused by the text's line height. That's not something you
are likely to want to change, so I'd look for another way to put a dotted
red underline on your hovered links. One solution may be to use a background
image two pixels wide, one red the other transparent, and repeat-x at a
suitable vertical position. Something like this, perhaps -
a:hover {
background: transparent url(images/red-dot.gif) repeat-x 0 1.1em;
text-decoration: none;
}
Adjust 1.1em to taste.
HTH
--
Cordially,
David
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
