Text aligns oddly.

Question

In the following image, I've outlined 3 things in red, the first is the the title of a box with the words 'Final Fantasy IV', the second box is 'Sonic Chronicles: The Dark Brotherhood, and the third is the css styling of the title as displayed by Chrome.

My issue is that in the first box, labeled 'Final Fantasy IV', you can see it looks ok, and there's no overlapping, in the second box however, you can see some font overlapping. What's some CSS magic I can do to fix this?

Thank you.

Answer 1

What's some CSS magic I can do to fix this?

CSS Magic:

position: relative;

CSS position documentation:

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

Answer 2

I would imagine that the image above the text, i.e. resultIMG is taking time to d/l, and that it is not downloaded when the browser is making it's calculations. You sometimes see this sort of thing when using JS to set equal height columns, where one of htem contains a large image. Worth looking into. Try setting a height on resultIMG, if you can