Forum Moderators: not2easy
#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 jumpsover 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.
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.
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.
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.
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.
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
Mom always said if you can't say anything nice...
