Making your existing Plone install look better in Internet Explorer 8

How to make IE8 render your Plone site nicely

As you may know, Internet Explorer 8 is built to render as "standards-based." For a full explanation on what this means, please read this article.

In the context of Plone, websites viewed in IE8 do not play nicely with a file named IEFixes.css. This file is commonly used for recording hacks for Internet Explorer. Unlike previous versions of IE, IE8 does not respond to hacks, and instead prefers good, clean code, much as you'd ordinarily write for a standards-compliant browser like Safari or Firefox.

To resolve the problems with IE8 and the IEFixes.css file, we have two options:

• Allow IE8 to render as it should by ignoring this file (while still allowing the file to be used when viewing the site in IE versions less than 8), or
  
• Tell IE8 to render as though it were actually IE7.

The IEFixes.css file is pulled in differently depending on what version of Plone you are running, so there are some minor variations in the instructions below.

Ignore the IEFixes.css by filtering based on IE version

In order to be more compliant (and feel less dirty), it's best to let Internet Explorer 8 render as it should, without attempting to use any hacks against it. Our best option here for 2.x sites -- without losing any hacks to IE5, 6, or 7 -- is to alter the code around IEFixes.css to sniff out the correct version of IE. For 3.x sites, we do not currently have a known solution that allows IE8 to render as it should.

2.x websites

As explained earlier, the code used to pull in IEFixes.css varies based on your version of Plone. For 2.x websites, you can make the changes below by altering the code in header.pt, found in the ZMI in portal_skins/CMFPlone/plone_templates:

    <!-- Internet Explorer CSS Fixes -->
    <tal:iefixstart replace="structure string:&lt;!--[if IE]&gt;" />
        <style type="text/css" media="all" tal:condition="exists: portal/IEFixes.css"
               tal:content="string:@import url($portal_url/IEFixes.css);">
        </style>
    <tal:iefixend replace="structure string:&lt;![endif]--&gt;" />

This code tells us that if we are using a browser named "IE," then it should load IEFixes.css. We want to alter this to say "if we are using a browser named IE with a version less than 8," load IEFixes. We do this by tweaking the "[if ]" statement as seen in the second line below:

    <!-- Internet Explorer CSS Fixes -->
    <tal:iefixstart replace="structure string:&lt;!--[if lt IE 8]&gt;" />
        <style type="text/css" media="all" tal:condition="exists: portal/IEFixes.css"
               tal:content="string:@import url($portal_url/IEFixes.css);">
        </style>
    <tal:iefixend replace="structure string:&lt;![endif]--&gt;" />

To read more about what this conditional syntax means, read this.

Assuming your site's portal_css is in debug_mode, you should see the change to your page template immediately upon refreshing your browser. You can confirm that the IEFixes.css file is not being pulled in by viewing your site in Internet Explorer 8 and using the Web Developer tools that ship with IE8 to drill into your CSS.

3.x websites

Tell IE8 to render using the IE7's engine instead

In some cases, you might wish to tell your websites to ignore IE8's rendering mechanism, which is now standards-based, and use the IE7 rendering mechanism instead. This might be especially helpful if you have a lot of Plone sites to maintain, or the CSS code is known to be hacky. 

2.5x websites

In Plone 2.x, it was very easy to tell a Plone site viewed in IE8 to render as though it were IE7, also known as "compatibility view." To do so, edit the header.pt page template found in portal_skins/CMFPlone/plone_templates and add the following line:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

3.x websites

To render your site in IE8 as though you are using IE7, you need to tell IE8 to render as though it were IE7 using the following strategy:

http://blogs.msdn.com/hanuk/archive/2008/08/28/apache-httpd-configuration-for-ie7-standard-mode-rendering-in-ie8.aspx