Background Image Alignment

[KDLA]

Hi -

I've got this code:

<p><strong>Rating:</strong> <div style="background-image: url(star.gif); background-repeat: repeat-x; width: 50px; height: 10px;"></div></p>

I want the stars to appear on the same line as the "Rating:".

How do I do that? Or should I just use the image as regular clip art....

(Star.gif attached)

Thanks,
KDLA

[jogol]

<p>
<span style="font-weight: bold; float: left;">Rating:</span>
<div style="float: left; background: url(star.gif) repeat-x 0 50%; width: 50px; height: 20px;"></div>
</p>but be aware that the stars are not visible when css is not available. better put it in the (x)html, also because of semantics. use alt="5 star ranking" when you do so.

[KDLA]

Thanks for the response. :)
When you write
better put it in the (x)html
Do you mean that it would be better to have just five image files back to back?

The only reason I did it this way was to conserve space, since the page is image-heavy already. (There's a textual explanation of the rating underneath the stars.)

[jogol]

Do you mean that it would be better to have just five image files back to back?yes

if you put the same image five times back to back it still only has to be downloaded from the server once. same as with the css approach. the only thing is that the markup is <img src="..... multiplied by 5.

your one star gif is 128 bytes. i created a 5star gif out of that which is only 239 bytes. so i´d go and create different gifs for rating 1, rating 2, rating 3 etc. just to keep the markup cleaner.

[KDLA]

Muchas gracias.

Sometimes I think I've plunged a little too deeply into CSS. I wonder if it can be an addiction?

Thanks again -
KDLA

[ray326]

I don't think a div in a p is kosher.

[KDLA]

Nope: thus, the frustration. Had it as a <span> tag; when that didn't work, I changed to <div> on a whim. Am using the image as clip art, instead.
Thanks for weighing in, ray326.

[Mr Initial Man]

I don't think a div in a p is kosher.
No, I learned that the hard way.

Nope: thus, the frustration. Had it as a <span> tag; when that didn't work, I changed to <div> on a whim. Am using the image as clip art, instead.
Thanks for weighing in, ray326.

Try span:{display:block;}, giving your span a class name, if needed. It will make the browser treat it like a block element. For that matter, you could even use img:{display:block;}