27 February 2006

IE6 MHTML Case-Sensitivity and CSS Paths

We wanted to generate and send an MHTML file to a customer. The source HTML page was on our file system and it referenced some image files and CSS files. We could have used a ZIP archive instead, but since IE6 could create .MHT files, we thought we had a simple solution.

After generating the MHTML file, we opened it on another computer and we noticed that the styles were not working. After some hacking, it turns out that there are two problems with the MHTML file generated by IE6:

  1. The <link> tag and Content-Location contain an absolute path to the CSS file. We had to replace those path strings with a relative path string.
  2. Harder to spot but very annoying was that IE6 now treated CSS class names as case sensitive, so class="footer" and class="Footer" are different. IE6 ignores the case of class names when it opens HTML files!

It turns out that Firefox's MAF extension is a better solution. MAF generates relative paths for files (the first problem) and in this sense, generates better MHT files than IE6. I found it a bit ironic since Firefox does not, by default, open MHT files.