Span around image problem in Firefox

[steveoidm]

I have seen this before but cant remember how to fix it and cant find anything online..

I want an image to have a 2px white border, then an 8px image background, then a 1px border.

This is my css.

span.img {border:1px solid #333;background-image:url(i_back.gif);padding:8px;}
span.img img{border:2px solid white;}

Html

<p><span class="img"><img src="hunza-garden.jpg"/></span></p>

This works in IE but not firefox, I have attached an image of the problem.

Any ideas?

Thanks!

Steve

[DaveWoods]

I can't see the images so not entirely sure but I think you'll need to change the second class to

span img (i.e. remove the period/fullstop)

Then you'll need to apply display: block; to the first style.

Which should give you this

span.img {display: block; border:1px solid #333;background-image:url(i_back.gif);padding:8px;}
span img img{border:2px solid white;}

Hope that's what you're after?

[Paul O'B]

Hi,

You will need to float the span so that it wraps around the image. The image pokes out of the line-height but the span still stays at line-height which is why it doesn't wrap the image. IE gets this wrong and stretches the span around the image when it shouldn't.

span.img {float:left;border:1px solid #333;background-image:url(i_back.gif);padding:8px;}
span.img img{border:2px solid white;display:block}

span img img{border:2px solid white;}

How can an image have another image inside it lol

It has to be span.img img although adding a class of img to a span is pretty confusing anyway and is probably what threw you .

[DaveWoods]

Well spotted Paul, I'd not spotted the img in the second style and was simply changing it to be

span img

as at a quick glance it looked like the two styles were the same, but my mistake

[steveoidm]

Perfect, thanks!

Will make the class name clearer, not sure why I thought that was a good idea