/    Sign up×
Community /Pin to ProfileBookmark

background image with text link not appearing in IE6

Copy linkTweet thisAlerts:
Jun 07.2007

so, i’m trying to style my links so that there is a little image to the right of them. easy to do, works just fine, but IE6 has problems when the link wraps to a second line.

i recreated the problem [URL=”http://www.lakeshorevineyard.org/newsite/linktest.html”]here[/URL]. Check the second link, the one that wraps two or three lines in IE6.

my CSS is on the right of the page.

everything validates.

help!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAJun 07.2007 — Try adding {display: inline-block;} to your a:link CSS.

KDLA
Copy linkTweet thisAlerts:
@jaredhauthorJun 08.2007 — thanks for the suggestion, but that made it even worse! ?
Copy linkTweet thisAlerts:
@KDLAJun 08.2007 — Huh -- that worked for me. ?
Copy linkTweet thisAlerts:
@WebJoelJun 08.2007 — <!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=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

<!--

#code {float:right; font-size: small;}

#table {float:left; padding:10px; border:1px solid gray;}

a:link {

color: #008800;

background-image: url(http://www.lakeshorevineyard.org/newsite/images/link.gif);

background-repeat: no-repeat;

background-position: right 50%;

padding-right: 14px;

text-decoration: none;

border-bottom-width: 1px;

border-bottom-style: dotted;

border-bottom-color: #008800;

}


a:hover {

color: #333;

background-image: url(http://www.lakeshorevineyard.org/newsite/images/link_over.gif);

background-repeat: no-repeat;

background-position: right 50%;

padding-right: 14px;

text-decoration: none;

border-bottom-width: 1px;

border-bottom-style: dotted;

border-bottom-color: #333;

}

-->

</style>

</head>

<body>

<table id="table" width="200" border="0" cellspacing="0"

cellpadding="0">

<tr>

<td>

<p>&nbsp;This is a test. This is only a test. Internet

Explorer sucks. This is a test. <a href="#">This</a> is

a test. This is only a test. Internet Explorer

sucks. This is a test. This is a test. This is

only a test. <a href="#">Internet Explorer sucks. This

is a test. This is a test.&nbsp; This is only a

test.</a>

<br />Internet Explorer sucks. This is a test.

This is a test. This is only a test. Internet

Explorer sucks. This is a test. This is a test.

This is only a test. Internet Explorer sucks. This is a

test. This is a test. This is only a test.

Internet Explorer sucks. This is a test.</p>

<p>This is a test. This is only a test. <a href=

"#">Internet Explorer</a> sucks. This is a test. This

is a test. This is only a test. Internet Explorer

sucks. This is a test.</p>

</td>

</tr>

</table>

<div id="code">

<p>CSS is as follows:</p>

<p><code>a:link {<br />

color: #008800;<br />

background-image: url(images/link.gif);<br />

background-repeat: no-repeat;<br />

background-position: right 50%;<br />

padding-right: 14px;<br />

text-decoration: none;<br />

border-bottom-width: 1px;<br />

border-bottom-style: dotted;<br />

border-bottom-color: #008800;<br />

display: inline-block;<br />

}<br /></code></p>

<p>a:hover {<br />

color: #333;<br />

background-image: url(images/link_over.gif);<br />

background-repeat: no-repeat;<br />

background-position: right 50%;<br />

padding-right: 14px;<br />

text-decoration: none;<br />

border-bottom-width: 1px;<br />

border-bottom-style: dotted;<br />

border-bottom-color: #333;<br />

display: inline-block;<br />

<br />

}</p>

</div>

<!-- text below generated by server. PLEASE REMOVE -->

<!-- Counter/Statistics data collection code --><script language=

"JavaScript" src="http://hostingprod.com/js_source/geov2.js" type=

"text/javascript">

</script><script language="javascript" type="text/javascript">

geovisit();

</script><noscript><img src=

"http://visit.webhosting.yahoo.com/visit.gif?us1181263031" alt=

"setstats" border="0" width="1" height="1"></noscript>

</body>

</html>[/QUOTE]

Not sure what you're after here... but maybe this?

http://www.dfo-mpo.gc.ca/zone/underwater_sous-marin/atlantic/acod_e.htm

but:

code {

font-size: x-small;

}[/QUOTE] is meaningless. "code"? -Is that a [I]class[/I] or an [I]id[/I]?

"Everything validates"? I found a few errors. ?
×

Success!

Help @jaredh 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.22,
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,
)...