inline element background image with IE

[Mark Tranchant]

On my site, I use a background image of a small arrow to denote links
that lead away from my site. This page has four such links in the first
section:

http://tranchant.plus.com/notes/cable-wrap

The links are coded thus:

<a class="external" href="url">blah</a>

with:

a.external {
background: transparent url('/images/ext') no-repeat 100% 55%;
padding-right: 11px;
}

All works fine, except in IE (surprise) when the image is not shown if
the element either goes across two lines or starts at the beginning of a
line. Load up the above URL in IE and resize the window to see the effect.

Is this a known IE bug (I expect so) and is there anything I can do
about it (I guess not...)?

--
Mark.
http://tranchant.plus.com/

[Steve Pugh]

Mark Tranchant <ma**@tranchant.plus.com> wrote:

On my site, I use a background image of a small arrow to denote links
that lead away from my site. This page has four such links in the first
section:
http://tranchant.plus.com/notes/cable-wrap

<a class="external" href="url">blah</a>

a.external {
background: transparent url('/images/ext') no-repeat 100% 55%;
padding-right: 11px;
}
By changing the 55% to 0 you can see what IE is doing...
All works fine, except in IE (surprise) when the image is not shown if
the element either goes across two lines or starts at the beginning of a
line. Load up the above URL in IE and resize the window to see the effect.
It's putting the background-image at the rightmost position possible
in the inline boxes generated by the element, regardless of whether
this is at the end of the element or not.

You have to admire the (perverse) logic behind this behaviour. :-(
Is this a known IE bug (I expect so) and is there anything I can do
about it (I guess not...)?

Can't think of anything you can do. I had a little play with a nested
span and a repeating background image but ran into other bugs. :-(

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Els]

Mark Tranchant wrote:

On my site, I use a background image of a small arrow to denote links
that lead away from my site. This page has four such links in the first
section:

http://tranchant.plus.com/notes/cable-wrap

The links are coded thus:

<a class="external" href="url">blah</a>

with:

a.external {
background: transparent url('/images/ext') no-repeat 100% 55%;
padding-right: 11px;
}

All works fine, except in IE (surprise) when the image is not shown if
the element either goes across two lines or starts at the beginning of a
line. Load up the above URL in IE and resize the window to see the effect.

Is this a known IE bug (I expect so) and is there anything I can do
about it (I guess not...)?

If you replace 55% by .55em, the arrow will be shown on the
end of the first line of the wrap, at the same height as
when it doesn't wrap.
In IE 55% apparently means at 55% of the two lines together.
With .55em you have 55% of only one line. It still doesn't
appear at the end of the element, but it's better than nothing?

As for not showing the arrow when the element starts at the
beginning of a line, just add padding-left:1px, and the
arrows show. (Don't ask me why...)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Els wrote:

Mark Tranchant wrote:

On my site, I use a background image of a small arrow to denote links
that lead away from my site. This page has four such links in the
first section:

http://tranchant.plus.com/notes/cable-wrap

The links are coded thus:

<a class="external" href="url">blah</a>

with:

a.external {
background: transparent url('/images/ext') no-repeat 100% 55%;
padding-right: 11px;
}

All works fine, except in IE (surprise) when the image is not shown if
the element either goes across two lines or starts at the beginning of
a line. Load up the above URL in IE and resize the window to see the
effect.

Is this a known IE bug (I expect so) and is there anything I can do
about it (I guess not...)?

Steve's answer gave me the idea to do this:

<a class="external"
href="http://www.fastech.ch/gb/VELCRO/Velcro%20Story.htm">why
I shouldn’t call it velcro<span>&nbsp;&nbsp;</span></a>

and in the stylesheet, change

#content a.external {
background:transparent url('../images/ext.png') no-repeat
100% 55%;
padding-right: 11px;
padding-left:1px;
}

to

#content a.external span{
background:transparent url('../images/ext.png') no-repeat
0% 55%;
}

and

#content a.external:hover {
background:transparent url('../images/exth.png') no-repeat
100% 55%;
background-color: #ffcccc;
}

to

#content a.external:hover {
background-color: #ffcccc;
}
#content a.external:hover span{
background:transparent url('../images/exth.png') no-repeat
100% 55%;
}

I've only tested in IE5 and 6, NS7.1 and Opera 7.5, no
problems with this method, other than
<span>&nbsp;&nbsp;</span> just being ugly code...

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -