Span/background-image IE6 bug?

[Walker]

I have a span containing two words. Eg.

<span>Avant Garde</span>

Using CSS, I pad the text to the right and assign a background-image. Eg.

span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}

The tag renders as expected...unless the line wraps in the middle of the
two words. Then the background-image doesn't appear in IE6, but it
renders fine in Firefox. Is this a browser bug?

To see an example, browse the following URL with IE6 and expand the "10
Tags" link: <http://arty.me.uk/2006/01/04/announcing-avantist/>
--
Walker
arty.me.uk

[logic_earth]

Walker wrote:

I have a span containing two words. Eg.

<span>Avant Garde</span>
To see an example, browse the following URL with IE6 and expand the "10
Tags" link: <http://arty.me.uk/2006/01/04/announcing-avantist/>

I think you should try and mark it up as a list as seeing it is a list.
Anyways backgound images and inline elements don't always play well.

[Walker]

logic_earth wrote:

Walker wrote:

I have a span containing two words. Eg.

<span>Avant Garde</span>

To see an example, browse the following URL with IE6 and expand the "10
Tags" link: <http://arty.me.uk/2006/01/04/announcing-avantist/>

I think you should try and mark it up as a list as seeing it is a list.
Anyways backgound images and inline elements don't always play well.

Don't play well in IE6 or current browsers in general? The code is
valid, the outcome should be obvious, and Konqueror, Opera and Firefox
all render it as expected. :)

(I was playing around forever with an unordered list solution before
choosing the span option, but I had some difficult that I can't recall.
I'll have a play around with the idea again anyway.)
--
Walker
arty.me.uk

[Els]

Walker wrote:

span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}

The tag renders as expected...unless the line wraps in the middle of the
two words. Then the background-image doesn't appear in IE6, but it
renders fine in Firefox. Is this a browser bug?

I'm not sure it's a bug, but it is a difference, yes.
The thing is, that when you state 'left' or '0px' for the horizontal
position of the background-image, IE assumes 'left' of the entire
span. When the span is divided over 2 lines, the left side of the
whole span, is on the left of the second line. Out of sight when you
set it 2px from the top.

A workaround might be to have two spans:

<span><span> </span>some words</span>

span span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Magnum - Walking The Straight Line

[Barbara de Zoete]

On Thu, 05 Jan 2006 22:47:38 +0100, Els <el*********@tiscali.nl> wrote:

Walker wrote:

The tag renders as expected...unless the line wraps in the middle of the
two words. Then the background-image doesn't appear in IE6, but it
renders fine in Firefox. Is this a browser bug?

A workaround might be to have two spans:

<span><span> </span>some words</span>

span span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}

Or to prevent the line break (if the span is just a two or three words
anyway).
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Walker]

Els wrote:

Walker wrote:

span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}

The tag renders as expected...unless the line wraps in the middle of the
two words. Then the background-image doesn't appear in IE6, but it
renders fine in Firefox. Is this a browser bug?

I'm not sure it's a bug, but it is a difference, yes.
The thing is, that when you state 'left' or '0px' for the horizontal
position of the background-image, IE assumes 'left' of the entire
span. When the span is divided over 2 lines, the left side of the
whole span, is on the left of the second line. Out of sight when you
set it 2px from the top.

A workaround might be to have two spans:

<span><span> </span>some words</span>

span span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}

Thank-you! I've tested the code offline and it fixes the problem and
renders identically in Opera and Firefox. :) I just had to alter the
padding of outer and inner spans because, being only applied to the
inner span, it was pushing the text (now in the outer span) to the right.

I've spent so many hours fighting browser inconsistencies (taming lists,
getting to grips with the box model, etc.) without relying on hacks that
it seems amazing that something like this had me stumped. And I'd never
have thought of this solution. Look me up if you're ever in Manchester
and I'll buy you a pint. ;-)
--
Walker
arty.me.uk

[Walker]

Walker wrote:

Els wrote: // Thank-you! I've tested the code offline and it fixes the problem and
renders identically in Opera and Firefox. :) I just had to alter the
padding of outer and inner spans because....

I knew there was something I forgot to mention. IE6 ignored the inner
span because it saw nothing but whitespace. So I just inserted an
&nbsp; and that fixed it. Eg.

<span><span>&nbsp;</span>some words</span>

--
Walker
arty.me.uk

[Els]

Barbara de Zoete wrote:

On Thu, 05 Jan 2006 22:47:38 +0100, Els <el*********@tiscali.nl> wrote:

Walker wrote:

The tag renders as expected...unless the line wraps in the middle of the
two words. Then the background-image doesn't appear in IE6, but it
renders fine in Firefox. Is this a browser bug?

A workaround might be to have two spans:

<span><span> </span>some words</span>

span span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}

Or to prevent the line break (if the span is just a two or three words
anyway).

Yup - that would work very well too <g>
(I hadn't seen the actual situation and had a much longer span in my
imaginary example problem ;-) )

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: INXS - Bitter Tears

[Jim Moe]

Walker wrote:

I was playing around forever with an unordered list solution before
choosing the span option, but I had some difficult that I can't recall.

See <http://css.maxdesign.com.au/listamatic/>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Walker]

Jim Moe wrote:

Walker wrote:

I was playing around forever with an unordered list solution before
choosing the span option, but I had some difficult that I can't recall.

See <http://css.maxdesign.com.au/listamatic/>

Been there, done that. Inline lists with background-images and padding
are afflicted by more problems in IE6 than the span method I chose.
Exactly the same rendering problem was occurring on the final list item
on a line for example, and getting the padding and margins consistent
across all browsers was more trouble than it was worth.

IE6 just always wanted to do something differently. With this span
solution, I've got the faux list rendering how I would like across the
big three browsers...oh, and Konqueror too.
--
Walker
arty.me.uk

[Walker]

Els wrote:

Barbara de Zoete wrote:

On Thu, 05 Jan 2006 22:47:38 +0100, Els <el*********@tiscali.nl> wrote:

Walker wrote:
The tag renders as expected...unless the line wraps in the middle of the
two words. Then the background-image doesn't appear in IE6, but it
renders fine in Firefox. Is this a browser bug?

A workaround might be to have two spans:

<span><span> </span>some words</span>

span span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}

Or to prevent the line break (if the span is just a two or three words
anyway).

Yup - that would work very well too <g>

Presumably with { white-space: nobr } ? I tried that a few days ago but
it invalidated the code.

--
Walker
arty.me.uk

[Els]

Walker wrote:

Els wrote:

Barbara de Zoete wrote:

On Thu, 05 Jan 2006 22:47:38 +0100, Els <el*********@tiscali.nl> wrote:

Walker wrote:
>The tag renders as expected...unless the line wraps in the middle of the
>two words. Then the background-image doesn't appear in IE6, but it
>renders fine in Firefox. Is this a browser bug?

A workaround might be to have two spans:

<span><span> </span>some words</span>

span span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}

Or to prevent the line break (if the span is just a two or three words
anyway).

Yup - that would work very well too <g>

Presumably with { white-space: nobr } ? I tried that a few days ago but
it invalidated the code.

No, with &nbsp;

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

[Walker]

Els wrote:

Walker wrote:

Els wrote:

Barbara de Zoete wrote:

Or to prevent the line break (if the span is just a two or three words
anyway).

Yup - that would work very well too <g>

Presumably with { white-space: nobr } ? I tried that a few days ago but
it invalidated the code.

No, with &nbsp;

Ah, I didn't know an &nbsp; would do that. I'll make a mental note of
it. Probably not the best solution for this scenario because the tags
(and spaces between words) are generated by a third-party PHP plugin
which I'd rather not modify -- otherwise, everytime there's a new
release, I'd have to do the mod all over again. The beauty of your
nested span solution is that the PHP function accepts the before and
after tags as a parameter, so I only have to modify my own template.

--
Walker
arty.me.uk

[Els]

Walker wrote:

Els wrote:

Walker wrote:

Els wrote:

Barbara de Zoete wrote:

>Or to prevent the line break (if the span is just a two or three words
>anyway).

Yup - that would work very well too <g>

Presumably with { white-space: nobr } ? I tried that a few days ago but
it invalidated the code.
No, with &nbsp;

Ah, I didn't know an &nbsp; would do that.

&nbsp; -> non breaking space :-)
I'll make a mental note of
it. Probably not the best solution for this scenario because the tags
(and spaces between words) are generated by a third-party PHP plugin
which I'd rather not modify -- otherwise, everytime there's a new
release, I'd have to do the mod all over again. The beauty of your
nested span solution is that the PHP function accepts the before and
after tags as a parameter, so I only have to modify my own template.

Good :-)

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

[Alexander Clauss]

Walker <wa**********@gmail.com> wrote:

The tag renders as expected...unless the line wraps in the middle of the
two words. Then the background-image doesn't appear in IE6, but it
renders fine in Firefox. Is this a browser bug?

No, not really.

This is a detail that is explicitly not yet addressed by the CSS 2.1
standard. Here's what the official CSS 2.1 specification says:

"The tiling and positioning of the background-inamge on inline
elements is ndefined in this spcification. A future level of CSS may
define the tiling and positioning of the background-image on inline
elements."

<http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat>

--
Alexander

[Jim Moe]

Els wrote:

Presumably with { white-space: nobr } ? I tried that a few days ago but
it invalidated the code.

Because it should have been: { white-space: nowrap; }

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Els]

Jim Moe wrote:

Els wrote:

Presumably with { white-space: nobr } ? I tried that a few days ago but
it invalidated the code.

Because it should have been: { white-space: nowrap; }

Wasn't me that typed the post you are replying to - please don't
misquote :-)

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