...

View Full Version : Limit underline to the text



Rain Lover
04-07-2011, 06:10 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!

teedoff
04-07-2011, 06:21 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!

Is that your complete code?

Excavator
04-07-2011, 06:24 PM
Hello Rain Lover,
Since the image and text are both part of the anchor you need to put the text in a span so you can style it differently.
Try something like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
height: 500px;
width: 700px;
margin: 30px auto;
padding: 50px;
background: #999;
}
a:link,
a:visited {
text-decoration: none;
color: #333;
}
a:hover,
a:active {color: #f00;}
a:link span,
a:visited span {
border-bottom: 1px solid #333;
}
a:hover span,
a:active span {border: none;}
img {
border: none;
vertical-align: bottom;
margin-left: 15px
}
</style>
</head>
<body>
<div id="container">
<a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt="" /></a>
<!--end container--></div>
</body>
</html>

Rain Lover
04-07-2011, 07:26 PM
Is that your complete code?

Yes, it is.

teedoff
04-07-2011, 07:49 PM
So you dont have opening and closing html, head and body tags at all??

Rain Lover
04-07-2011, 08:01 PM
So you dont have opening and closing html, head and body tags at all??

As far as I know it doesn't make a difference and my code is valid -- give it a try in W3C Validator (http://validator.w3.org/).

Rain Lover
04-07-2011, 08:15 PM
Hello Rain Lover,
Since the image and text are both part of the anchor you need to put the text in a span so you can style it differently.

Thanks for the detailed answer! However, look and style of a border is different from an underline and I'd prefer not to replace them with each other.

Thanks anyway! :)

SB65
04-07-2011, 08:48 PM
How about:



a{text-decoration:none}
a span{text-decoration:underline}
a:hover span {text-decoration:none;}
img {border:none; vertical-align:bottom; padding-left:15px}

Rain Lover
04-07-2011, 08:56 PM
How about:



a{text-decoration:none}
a span{text-decoration:underline}
a:hover span {text-decoration:none;}
img {border:none; vertical-align:bottom; padding-left:15px}


If you mean the following embed code, unfortunately it doesn't work in IE6:


<!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{text-decoration:none}
a span{text-decoration:underline}
a:hover span {text-decoration:none;}
img {border:none; vertical-align:bottom; padding-left:15px}
</style>

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

SB65
04-07-2011, 09:21 PM
Try:


a{text-decoration:none}
a:hover{background-color:transparent}
a span{text-decoration:underline}
a:hover span {text-decoration:none;}
img {border:none; vertical-align:bottom; padding-left:15px}

Ridiculous, but then so is IE6...:rolleyes:

Rain Lover
04-07-2011, 09:29 PM
Try:


a{text-decoration:none}
a:hover{background-color:transparent}
a span{text-decoration:underline}
a:hover span {text-decoration:none;}
img {border:none; vertical-align:bottom; padding-left:15px}

Ridiculous, but then so is IE6...:rolleyes:

Fantabulous!

Rain Lover
04-22-2011, 07:15 PM
I just came up with a simple 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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum