The <p> stretches until the end of the containing div. I don’t want that.
Also the image and the text are slightly disaligned, but that might be caused by the round corners?
This is what happens when I put a span around the image and the text:
the CSS doesn’t change.
As you can see, the box closes nicely around the text, and the text is aligned perfectly, but the image is going outside of the span (or the span doesn’t include the entire image).
When I add display: block; to the span’s css, it behaves exactly as it did with the <p>.
Is it possible to do? And if so, what am I doing wrong?
I’ve searched the forum and googled around for some time, but haven’t found anything yet.
In Opera 12.10 it displays perfect.
In Chrome the image is a bit disaligned to the bottom, the text is aligned good.
In IE9 the image is a bit disaligned to the bottom, and the text a bit to the top.
FF16 is like IE9.
Any idea how to solve those disalignments? I’ve tried with margins and paddings, but when I solve one I break another
You could try setting a specific value for vertical-align on the paragraph - the default is baseline but one of the other values may work better - probably text-bottom since you are only displaying numbers in the text and no numbers have descenders.
These numbers are static right? If you can’t get it perfect then just wrap the text in a span > give the p position relative and a width in ems > and position the span absolutely where you want it.
The problem seems to be the image that isn’t aligned in the middle, but pushed a bit down, stretching the <p> vertically, and therefor it looks like the text is also disaligned, but it isn’t. It’s the image. I’ll continue testing tomorrow. Any ideas are welcome