IE8 fails at displaying the page completly

Question

When I open my project, Only the background and a image not found item are shown, while the page is 100% xhtml 1.1 strict. The developer tools show IE stops rendering after the SVG logo... Firefox works as it should. Damn You IE!

Answer 1

Try not self-closing the 'object' tag.

<object data="/images/Logo_header.svg" type="image/svg+xml"></object>

instead of

<object data="/images/Logo_header.svg" type="image/svg+xml" />

Not sure if this is a bug though, or FF recovers gracefully. It is only valid XML if you also serve your page as XML, which you don't. You use 'text/html' instead of 'application/xhtml+xml'.

Answer 2

Kamiel is right: you can't use an XML self-closing tag on IE. In any case, since IE can't render SVG, you will need to include some fallback content such as an image inside the object anyway.

I would advise against the sniff-and-serve-XHTML-as-XML-or-HTML approach you are using at the moment. There is no benefit to it; you will only get weird compatibility problems like this as your documents are handled with different parsing, style and DOM contexts. What's more, the Vary: Accept header you have to use in the response when you're doing this makes caching much less effective in IE. In any case, W3 specifically don't allow XHTML-as-text/html for XHTML 1.1 documents.

Either go all-out and serve only XHTML 1.1 (sacrificing IE compatibility), or stick to serving XHTML 1.0 Strict content as text/html to all comers, observing compatibility guidelines.