background image problem with IE

**nomad** · Jun 6 '07, 07:51 PM

Originally posted by jaredh

so, i'm trying to style my links to have a little tiny image to the right of the image.

i added some padding on the right and applied the background image in CSS.

problem is, if the link wraps a line, so that the link starts on one line but finishes on the next line, IE doesn't seem to understand not to put the image on the first line, but on the second. it leaves the padding in the right spot, but the image is not there.

thoughts?

Not to sure what you want. but try this:

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style></head>
<body>
<table width="124" border="0" cellspacing="0" cellpadding="0" >
<tr>
<th width="27" scope="col"><im g width="22" height="16"></th>
<th width="97" align="left" scope="col"><di v align="left"><a href="sss.htm"> abc</a></div></th>
</tr>
</table>
</body>
</html>
[/HTML]

Nomad

**jaredh** · Jun 6 '07, 08:20 PM

thanks, but i'm not sure you understood what i'm trying to do. i'm not doing anything with tables, i am just trying to add a CSS background image to the right side of all my text links (a very small image that stays inline with text).

i got it working perfectly (its really simple) using just CSS to add a little padding to the right side, and then apply the image in CSS on the right, not repeating.

so it works beautifully, except in Internet Explorer ONLY WHEN the text link starts on one line and then finishes on (wraps to) the next.

all the other browsers were smart enough to handle this, but IE kept leaving the padding on the second line but trying to add the image on the first line.

**drhowarddrfine** · Jun 6 '07, 08:50 PM

Yes, tables should never be used for layout.

jared, sometimes our brains are fried and we need to see sample code or a link so we don't have to think too hard.

**jaredh** · Jun 6 '07, 11:29 PM

ok, here is the problem. View it in IE6 to see what i'm talking about, the big long link that spans two lines. IE6 doesn't put the little CSS image in the right place.

here is the CSS code:

Code:

#content a:link {
	padding-right: 14px;
	background-image: url(images/link.gif);
	background-repeat: no-repeat;
	background-position: right;
}

#content a:hover {
	padding-right: 14px;
	background-image: url(images/link_over.gif);
	background-repeat: no-repeat;
	background-position: right;
}

**jaredh** · Jun 7 '07, 05:54 PM

bump

any help at all? anyone have thoughts? what am i doing wrong?i

**drhowarddrfine** · Jun 7 '07, 06:17 PM

Sorry I missed this.

IE has a problem with background-position. It aligns itself with the wrong thing. Instead of aligning with the border, it aligns with the padding. I'm not saying this from experience but from my chart of bugs. So, I assume, that since the padding on that line doesn't move, it stays in place rather than following the border as it moves to the next line.

A fix? I don't know and I'm leaving to go out of town in an hour or so but I'll see what I can see.

background image problem with IE

background image problem with IE

Comment

Comment

Comment

Comment

Comment

Comment