IE7 Misinterprets My HTML

Question

This site displays fine in IE8, Mozilla, Safari and Chrome but IE6/7 really screws it up. I've been trying to bux fix the layout, but I'm ready to give up. Wordpress 3.0, coded using BBEdit and PSPad, hosted on Yahoo (terrible, but not my choice).

Site: yovinomd.com

In IE8 dev tools, the HTML is all wrong. For some reason there are 2 blank lines before the !DOCTYPE that do not appear in PSPad or BBEdit. It renders the !DOCTYPE as a commented-out empty text node. The rest of the HTML is broken: IE thinks the head only contains my page title and it throws the meta and scripts into a commented out body tag. I've never seen this before, but I think it's breaking my HTML and causing the layout problems.

IE dev tool screenshot: http://img405.imageshack.us/i/iedev.jpg/

Could this be a DOCTYPE issue? My understanding is that the Transitional would be read as Strict by IE, which should be fine.

Answer 1

In your div#sidebar, you have an ul, wich holds a li,div then another li, according to firebug, but checking it with IE-tester in an IE-7 tab shows only li-elements and on li outside you ul?

I think there's an error in your html(unclosed tag) or IE7 can't handle a div between li-elements(seeing as how the div itself also holds li elements) but I'm not sure of this is so.

Also, you seem to have quite some error, like using the same id on multiple places ... http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fyovinomd.com%2Fmd%2F

Answer 2

Your page starts with two line feeds (0x0A), and then an Byte Order Mark (BOM). Because the BOM are not the first bytes in the file they are being treated as displayable character data and therefore the parser infers the start of body. Everything following gets put in body except where there are special rules built into the parser to do otherwise. In IE, that means that the title gets put in the head. In Firefox, title and meta elements get moved to head.

If you can remove the two starting LFs, things should parse much more sensibly but you should also ensure your page validates. It's currently a long way from doing so.

Answer 3

I fixed the HTML (removed the DIV within the UL) and got rid of one of the blank lines before the !DOCTYPE (still stuck with one, but it works). A jQuery plugin I downloaded was broken, so I removed it altogether as it was breaking the rest of my script.

It works in IE7, but I have a bug with the front page news excerpts clearing the floated calendar.