Welcome to WebmasterWorld Guest from 35.153.135.60

Forum Moderators: not2easy

Message Too Old, No Replies

IE/Win 6 and background images for inline elements

Doesn't work when inline element spans more than one line.

     
11:35 pm on Oct 6, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 8, 2003
posts:548
votes: 0


I want decorate every A tag with a little image, indicating that it's a link. I can't use list-image: because that implies display:block and I want my links to be inline. I can't use before: because it's not widely supported. Remaining option is background-image.

#content A:link {
background-image: url("i/link.gif");
background-repeat: no-repeat;
background-position: left center;
padding-left: 16px;
}

This works great in Firefox. In IE/Win 6.0 it only works if the link fits on one line. If it doesn't, the image is displayed at the beginning of the line where the link starts, vertically centered between that line and the next one.

For example (anchor text is bold, smiley represents image). It should look like this

The quick brown ;)fox jumps

over the lazy dog.

But in IE it looks like this:

The quick brown fox jumps
;)
over the
lazy dog.

It seems as if IE positions the image relative to a box that includes both lines entirely instead of relative to the first character box. The funny thing is that for background color and padding IE gets the outline right; that is, the left padding is inserted immediately before the first character and the background color starts with left padding and ends with the last character.

My workaround for quirks mode is

white-space: nowrap;
width: 1%;

If width: 1% isn't there, the link will be forced on one line but the padding starts at the end of preceding line, leading to the same faulty image position. The width: 1% rule turns the inline element into something like a CSS2 style inline-block element.

For standards mode, the work around is

width: 1%;
display: inline-block;

Both workarounds have the drawback of creating a wide box that messes up text flow and layout. Just wanted to get this off my chest. I suppose there isn't an easy solution.

5:23 pm on Oct 7, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


I can't use list-image: because that implies display:block and I want my links to be inline.

<p class="inlinelink">The quick brown <ul><li><a href="#">fox jumps over the</a></li></ul> lazy brown dog.</p>

.inlinelink ul, .inlinelink li {
display:inline;
list-style-image: url(smiley.gif);
}

Complicated, and probably not semantically ideal, but it'd work.

5:27 pm on Oct 7, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 17, 2001
posts:1262
votes: 0


Have you tried changing background-position: left center; to background-position: left top;?
9:13 pm on Oct 7, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 8, 2003
posts:548
votes: 0


Thanks for the suggestions, lads.

Have you tried changing background-position: left center; to background-position: left top;?

Yes. If I do that, the image will be invisible because it is completely outside the outline of the link element. It will be obscured by the first word "The".

createErrorMsg, display:inline and list-style-image:xyz are contradictory because the standard says that list-style-#*$! properties are only applied to elements with display:list-item. In my first post I should have made more clear that I had already ruled out this option.

I spend hours on this one, it's not easy. We are not talking about how to use CSS to create the desired affect. I have already done that and my solution works in any CSS-compliant browser. This thread is about how to circumvent a IE browser bug.

2:48 am on Oct 8, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


We are not talking about how to use CSS to create the desired affect. I have already done that and my solution works in any CSS-compliant browser.

Sorry. I thought you were looking for responses to your original post. My mistake.
3:58 am on Oct 8, 2004 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 25, 2003
posts:1324
votes: 420


I think a slight change to your code will work cross browser:

CSS:

#content a:link span {
background: url("xml.gif") no-repeat left center;
padding-left: 16px;
width: 16px; /* for ie */
}

HTML:

<div id="content">
<p>The quick<br />
brown <a href="x"><span></span>fox jumps over<br />
the lazy dog.</a></p>
</div>

Yes it adds a <span> each time but it is clean: validates and looks reasonably similar cross browser.

8:35 am on Oct 8, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 8, 2003
posts:548
votes: 0


iamlost,

yep, that works. Now I'll just have to convince my CMS to put this <span> tag into every link. Cheers!

Sorry. I thought you were looking for responses to your original post. My mistake.

There's no need for snide remarks like that. The title says it all.

IE/Win 6 and background images for inline elements
Doesn't work when inline element spans more than one line
8:28 pm on Oct 8, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


***erase***

Mom always said if you can't say anything nice...