IE7 IE8 Misinterpreting EMs in layout?

Question

The website is www.holmecourt.com, and it renders exactly as I intend it to in Safari and IE9, this screenshot is viewed directly in Safari, which looks exactly the same in Adobe Browserlab for IE9: http://holmecourt.com/images/scrn1.png

However, the problem is that Browserlab shows IE8 as following, with IE7 pretty similar: http://holmecourt.com/images/scrn2.png

Ie7/8 previously displayed well when I was using pixels everywhere, but since changing everything to ems, IE7/8 seem not to like it.

I have searched for IE bugs with em, but could not find any, I was wondering if there are known bugs in how IE7/8 renders ems in layout?

Otherwise is there anything that a more experienced developer might notice in just comparing the screenshots, I thought it might be relevant that as well as the layout breaking, the text is not sized correctly, so perhaps its a problem with font-size being inherited?

I have tried not to be vague, but if this post is, I can definitely try to reword it.

All CSS accessible from the source but can supply any code needed.

Any help appreciate or ideas to look for problems appreciated!

Answer 1

Okay so in case anyone has a similar problem, I've realised what was happening!

I accidentally removed the HTML5 Shiv when I removed some conditional comments. This completely changed how IE 8 and below rendered HTML5 elements.

http://code.google.com/p/html5shiv/

Answer 2

I did stumble into the same kind of problem and i now use only pixels. What do you need em's for ? If it's for being able to resize the text, today's user agent are able to scale content correctly with pixels values.

Answer 3

You can implement specific style sheets to load conditionally for ie. In the head section of html:

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

This would load an ie specific .css file only when using ie8 or lower. You can then put your overrides in the ie.css file to let it display correctly in those versions.