/    Sign up×
Community /Pin to ProfileBookmark

Limit underline to the text

Copy linkTweet thisAlerts:
Apr 07.2011

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

[CODE]<!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>[/CODE]

The code result isn’t the same in all major browsers.
Many thanks for any help!

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@MarPloApr 07.2011 — Hy,

Try this variant (the text within <u> tag):
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;title&gt;Test&lt;/title&gt;

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

&lt;a href="#"&gt;&lt;u&gt;Subscribe to feed&lt;/u&gt;&lt;img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""&gt;&lt;/a&gt;
Copy linkTweet thisAlerts:
@Rain_LoverauthorApr 07.2011 — Hy,

Try this variant (the text within <u> tag):
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;title&gt;Test&lt;/title&gt;

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

&lt;a href="#"&gt;&lt;u&gt;Subscribe to feed&lt;/u&gt;&lt;img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""&gt;&lt;/a&gt;
[/QUOTE]

It doesn't have the effect I'm looking for: I'd like the underline to get removed on hover.
Copy linkTweet thisAlerts:
@cobblerApr 07.2011 — Try

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

a:hover {text-decoration:none;}

img {border:none; vertical-align:bottom; padding-left:15px}

</style>

</head>

<body>

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

</body>

</html>
Copy linkTweet thisAlerts:
@Rain_LoverauthorApr 07.2011 — Try

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

a:hover {text-decoration:none;}

img {border:none; vertical-align:bottom; padding-left:15px}

</style>

</head>

<body>

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

</body>

</html>[/QUOTE]

Would you please try it in Firefox? In Firefox it shows an extra continuous underline toward the image.
Copy linkTweet thisAlerts:
@MarPloApr 09.2011 — Maybe this:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;title&gt;Test&lt;/title&gt;

&lt;style type="text/css"&gt;
a {text-decoration:none;}
a span {text-decoration:underline;}
a span:hover {text-decoration:none;}
img {border:none; vertical-align:bottom; padding-left:15px}
&lt;/style&gt;

&lt;a href="#"&gt;&lt;span&gt;Subscribe to feed&lt;/span&gt;&lt;img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""&gt;&lt;/a&gt;
×

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...