Divs with text and background-image

[Mallefitzo]

Hi,

I am trying to get 4 divs 46px height and 600px width with a background-image.

<div style="font-size: 1.5em; background-image: url('tabelle_hintergrund.jpg'); background-repeat: no-repeat; background-position: center center; vertical-align: middle; width: 600px; height: 46px; padding-top: 20px">
Tu amigo consigue <b>15</b> SP &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tu recompensa: <b>$10</b>
</div>

<div style="font-size: 1.5em; background-image: url('tabelle_hintergrund.jpg'); background-repeat: no-repeat; background-position: center center; vertical-align: middle; width: 600px; height: 46px; padding-top: 20px">
Tu amigo consigue <b>100</b> SP &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tu recompensa: <b>$10</b>
</div>

<div style="font-size: 1.5em; background-image: url('tabelle_hintergrund.jpg'); background-repeat: no-repeat; background-position: center center; vertical-align: middle; width: 600px; height: 46px; padding-top: 20px; margin-bottom: 10px">
Tu amigo consigue <b>5.000</b> SP &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tu recompensa: <b>$10</b>
</div>

<div style="font-size: 1.5em; background-image: url('tabelle_hintergrund.jpg'); background-repeat: no-repeat; background-position: center center; vertical-align: middle; width: 600px; height: 46px; padding-top: 10px">
Recompensa total por amigo &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; <span style="font-size: 1.7em"><b>$100</b></span>

So I have got a few problems: How can I center the text so that it lies directly in the middle in the image and not to high o two low? I tried it with padding-top and it works for firefox but not with IE.

And another problem is with the text: To have a space between the text I added notbreakable spaces but of course this solution is not elegant. Could you help me with that?

P.D. I know the coding might not be the best but I am a newbie so be nice :D

[simonuk]

Welcome to WebmasterWorld

If it is tabular data you are displaying then use a table to display it, there is nothing wrong doing it that way.

If not then you need to give the content it's own element (like a P) so you can control the behavior easier. It is easier to control the element inside the parent instead of trying to make the parent do all the work.

[Moby_Dim]

Use additional divs for texts to solve both problems may be.