IE7 not displaying div containing text correctly

Question

I'm having difficulty trying to get IE7 to behave like a normal browser.

I have a HTML sample here: http://jsfiddle.net/6QSYM/4/ that looks fine in most browsers, but when viewed with IE7 you can see that the "Sector Used" text is merged with the line below it.

Can somebody suggest how I can correct this?

Answer 1

I run into this problem all the time! At the company I work at we still have to support IE7 (will it ever just DIE!). So the best solution I have found is to set the width for your none floating div. It's a hassle but that why IE knows how to calculate the layout.

Answer 2

Try this:

http://jsfiddle.net/6QSYM/9/

the semantics of your HTML elements are all over the place as well. Way too many spans and divs for me :)

Hope that helps.

Answer 3

Try adding:

clear:both;

to your .risk-statistic-container class.