CSS text background span padding

Question

I am trying to add a transparent png background to some dynamic text and give it 15 px padding all the way around the sentence.

As you can see from the photo the span class does not know how to add padding to text that does not have a line break. This text is part of a Views Slideshow and it changes every few seconds. I would like to add padding to the left,right, and after the break in the sentence. See the link sample. I heard that I may need to use php as it can count the characters and add padding. Does anyone know a way to do this. If I give this span class padding it only give padding to the front and end of the sentence but not after the line break.

http://visiongem.com/portfolio/span-class-help.jpg

The html and CSS are below:

.blueback {background-image:url(images/transparentback.png);}



<div id="sliderhome"><div id="slidertitle"><span class="blueback">[title]</span>
</div><div id="featureslider-list"><ul class="homepage-featureslider-list">
<span class="blueback"><li>[field_linkto_story_url]</li>
<li>[field_linkto_photo_url]</li>
<li>[field_linkto_video_url]</li></div>
</ul></span></div>

Answer 1

add padding to the text and then display property as table

.css{
    padding:10px;
    display:table;
}

Answer 2

The problem with that is, that a is an inline-element. I think it should be an inline- block -level-element at least to guarantee every browser would feel to add padding to the sides.

span { display: inline-block; padding: 6px 8px; /* I tend to define horizontal and vertical individual values because it helps out for harmonic proportion */ }

When I view a markup with the above style in safari, it works. May I change the display-type to just inline, it works also, but looks a little different on the sides. I think every browser will have it's slightly special way to interpret those attributes. But there could be a reason to why one won't make it to your needs. If you would highlight a single word in a sentence with a marker, correctly done you would just go from the near first to last letter of that rather than highlighting the spaces within cause they cut edge to the surrounding words. Anyway a text-marker will have its own tip size that the text its being used on has no influence on that – that could force upper and lower padding-values to be accepted anyway.

I think that's one of the cases where browser are a little unpredictable because of the thoughts their implementation is based on.

EDIT: I'm sorry! I was too late to post. The table-setting like mentioned above might as well help out enough.