Have you ever tried sending a 100% strictly compliant xhtml to IE, so that IE would use It’s xml engine to render the page? If so, you know that IE borks on it and forces you to download the xhtml file. I’m here to tell you that I’ve found a work around, that is standards compliant and gets around that limitation and forces IE to use the XML rendering engine. Two steps are required for it to work:
- Configure web server to send xhtml files with the mime type of application/xml
- Then attach a XSL sheet to each xhtml file you serve to IE
Example xhtml code
<?xml version=”1.0″ encoding=”utf-8″?>
<?xml-stylesheet type=”text/xsl” href=”fixMe.xsl”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=UTF-8″ />
<title>Simple Example < /title>
</head>
<body>
<!– xhtml code here –>
<body>
</html>
Required fixMe.xsl code
<xsl:stylesheet xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns=”http://www.w3.org/1999/xhtml” version=”1.0″>
<xsl:output method=”xml” encoding=”utf-8″/>
<xsl:template match=”/”>
<xsl:copy-of select=”node()”/>
</xsl:template>
</xsl:stylesheet>
Why does this work?
As far as IE is concerned you sent it a XML file, with an XSLT sheet applied to it. It’s XML rendering engine then applies the XSLT sheet which converts the XML page into an XHTML page. Without the XSLT sheet applied IE would have just showed us the source code to the page.
How did you ever figure this out?
I discovered this when I was developing this website, to teach myself XSLT. And knowing what I know about mime-types I figured it should work if I just changed the mime-type for XHTML from application/xhtml+xml to it’s alternate compliant mime-type of application/xml1, seeing as IE wasn’t having any issues displaying XML files sent as application/xml.
Additional Notes
Update: To see an example with SVG and MathML mixed in with the XHTML read So now that IE unerstands pure XHTML…
Vasil Rangelov Says:
Actually, this “hack” has long been available on W3C’s site, right here:
http://www.w3.org/MarkUp/2004/xhtml-faq#ie
and as you can see, it exists scince 2004.
With it, all browsers read application/xml. Firefox and IE however give a certain different MIME type to their documents.
Firefox uses application/xhtml+xml on the output tree when there’s a XHTML Strict DTD, regardless of the method attribute.
IE on the other hand uses text/html on the output tree when method is html, regardless of the DTD used.
In your particular case, the root element is HTML, and the XSLT specification defines a default value of “html” for the method attribute, which is why it isn’t needed.
The draconian error handling and XHTML modularization features are unlocked with this approach, however, due to the HTML MIME type use, CSS rules are still applied as with text/html. This approach is only ideal if you’re willing to maintain the stylesheet across two MIME types.
Mit The Destroyer Says:
Are you saying that IE ignores the <xsl:output method=”xml” encoding=”utf-8″ /> xsl tag?
Vasil Rangelov Says:
No. It’s actually Firefox that does it wrong I believe. IE output an XML tree, as if this is an ordinary XML document (MIME type application/xml or text/xml). That is the correct behaviour.
The “html” method should give text/html as a default MIME type, and Firefox checks the DTD for the default MIME type instead, and only checks the method when no DTD or an unknown one is supplied. IE does it correctly by checking the method attribute only.
Speking of:
<xsl:output method=”xml” encoding=”utf-8″ />
if you use THAT and have an actual HTML document with included CSS stylesheet (the “style” element) you get one very… neat bug Firefox has… the stylesheet in the “style” element WILL BE APPLIED, but the MIME type will be application/xml (or text/xml… I’m not sure) causing ONLY that stylesheet to be used (no browser stylesheet), no HTML links, etc.
At least that happened in Firefox 1.5. I haven’t tryed that in Firefox 2. Who knows. It could be fixed.
Mit The Destroyer Says:
Hmm Is my website doing that to you currently? as my entire website here is being served using the technique (although it is doing a bit more like dynamically pulling in the navigation via the xslt’s document function and building the site structure [/xsl/people.xsl]).
Vasil Rangelov Says:
Well, I don’t have FF 1.5 anymore, so I can’t really tell, but it works in FF 2.0. I could be mistaken about the conditions for this bug though, so I’ll need to do some homework. But I am absolutely sure such thing did existed in some circumstances. I’ll never forget that linearized table with no links in it. Scince it had much text in it, the sight was just ugly.
I have a problem with your site on IE though. I see your page without any CSS. And I belive it’s because you apply the CSS with the xml-stylesheet PI. When IE performs an XML transformation, it completely replaces the old tree with the new one, including PIs apparently. Is that done intentionally? ‘Cause it ain’t cool.
I do see an XHTML page though, which I think is kind’a odd.
Mit The Destroyer Says:
Actually, the lack of styles in IE is by design. I’m purposely hiding the style sheets from IE because, I’m using a good chunk of css 2.1 that IE doesn’t support yet (not even IE 7). And out of protest I decided for my personal website that I wasn’t going to hack around IE.
The one style sheet you see included in the processing instruction, is for browsers that support XML but don’t support client side XSLT. so that way all they see is an Enter Here button, that when clicked tells the server to do the XML to XHTML conversion on the back end and serve the page as application/xhtml+xml. you can try it out on Konqueror, or Opera < 9.