Log in

View Full Version : Limit underline to the text


Rain Lover
04-07-2011, 05:43 PM
Hi,

I'd like to have the underline for the text only and at the same keep the image part of the link:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Test</title>

<style type="text/css">
a:hover {text-decoration:none;}
img {border:none; vertical-align:bottom; padding-left:15px}
</style>

<a href="#">Subscribe to feed<img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>

The code result isn't the same in all major browsers.
Many thanks for any help!
jscheuer1
04-07-2011, 06:14 PM
Something like:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a {text-decoration: none;}
a:hover span {text-decoration:underline;}
a:hover img {text-decoration:none;}
a img {border-width: 0; vertical-align: bottom; margin-left: 15px;}
</style>
</head>
<body>
<a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
</body>
</html>

To get the image to align vertically where you want it you may have to abandon vertical align (varies by browser and is vague anyway for inline elements) and use position relative instead. Then you can tweak its position with the top property:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a {text-decoration: none;}
a:hover span {text-decoration:underline;}
a:hover img {text-decoration:none;}
a img {border-width: 0; position: relative; top: 2px; margin-left: 15px;}
</style>
</head>
<body>
<a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
</body>
</html>

With either approach, if other styles are set for *, span, a or img, these may bleed through.
Rain Lover
04-07-2011, 06:22 PM
Something like:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a {text-decoration: none;}
a:hover span {text-decoration:underline;}
a:hover img {text-decoration:none;}
a img {border-width: 0; vertical-align: bottom; margin-left: 15px;}
</style>
</head>
<body>
<a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
</body>
</html>

I really appreciate your help, but it's exactly the opposite of the effect I'm after: I'd like the underline to get removed on hover.
jscheuer1
04-07-2011, 07:39 PM
I meant to mention that I wasn't clear about what you wanted. I'm still not certain, but I have a better idea. How about:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a {text-decoration: none;}
a span {text-decoration: underline;}
a:hover span {text-decoration: none;}
a img {border-width: 0; position: relative; top: 2px; margin-left: 15px;}
</style>
</head>
<body>
<a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
</body>
</html>
Rain Lover
04-07-2011, 07:43 PM
I meant to mention that I wasn't clear about what you wanted. I'm still not certain, but I have a better idea. How about:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a {text-decoration: none;}
a span {text-decoration: underline;}
a:hover span {text-decoration: none;}
a img {border-width: 0; position: relative; top: 2px; margin-left: 15px;}
</style>
</head>
<body>
<a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
</body>
</html>

It doesn't work in IE6, which is unfortunately still used by many people. :(
jscheuer1
04-07-2011, 08:43 PM
I wouldn't worry about that. In fact I disagree. See the second graph on this page:

http://www.w3counter.com/trends

IE 6 is at 9% and falling. It's not clear if that's 9% of the entire browser base or 9% of the dwindling IE share of the browser base. Either way it's pretty insignificant and becoming less significant.

You could use javascript for IE 6 if it's that important to you. The issue is that IE 6 doesn't support hover on anything other than an anchor link tag. I had tried to work around that by styling the span as a child of the a tag. But it didn't work here.

There is:

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

where some hover effects on elements contained in an a tag (same syntax I used, as far as I can tell) are respected, but there's no text-decoration change, that might be significant.

If you wanted to script it, here's one way (only IE 6 will load any of the script code):


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if IE 6]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.flink span').hover(function(){
this.style.textDecoration = 'none';
}, function(){
this.style.textDecoration = '';
});
});
</script>
<![endif]-->
<style type="text/css">
a {text-decoration: none;}
a span {text-decoration: underline;}
a:hover span {text-decoration: none;}
a img {border-width: 0; position: relative; top: 2px; margin-left: 15px;}
</style>
</head>
<body>
<a class="flink" href="http://www/nowhere.com/"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
</body>
</html>
jscheuer1
04-07-2011, 09:40 PM
After further research, the way that other css does it is via a throwaway style for the pseudo class :hover on the a tag. Somehow that tricks IE 6 into applying the other :hover styles to the contained span. It uses background-color: transparent;, which is as good as any, but could conflict with other styles. It has to be a change though. I found z-index, which doesn't even apply to a non-positioned element works fine:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a {text-decoration: none;}
a:hover{z-index: 10;} /* dummy style for IE 6 */
a span {text-decoration: underline;}
a:hover span {text-decoration: none;}
a img {border-width: 0; position: relative; top: 2px; margin-left: 15px;}
</style>
</head>
<body>
<a href="http://www/nowhere.com/"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
</body>
</html>
Rain Lover
04-08-2011, 08:50 AM
After further research, the way that other css does it is via a throwaway style for the pseudo class :hover on the a tag. Somehow that tricks IE 6 into applying the other :hover styles to the contained span. It uses background-color: transparent;, which is as good as any, but could conflict with other styles. It has to be a change though. I found z-index, which doesn't even apply to a non-positioned element works fine:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a {text-decoration: none;}
a:hover{z-index: 10;} /* dummy style for IE 6 */
a span {text-decoration: underline;}
a:hover span {text-decoration: none;}
a img {border-width: 0; position: relative; top: 2px; margin-left: 15px;}
</style>
</head>
<body>
<a href="http://www/nowhere.com/"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
</body>
</html>

Great!
Rain Lover
04-22-2011, 05:12 PM
I just came up with a solution:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
a:hover {text-decoration:none;}
a {background:url(http://www.google.com/phone/static/images/feed-icon.gif) no-repeat right bottom; padding-right:31px;}
</style>

<a href="#">Subscribe to feed</a>