Magento IE Only Stylesheet

Sometimes you want to enable IE only stylesheets for Magento. The problem is that the documentation to accomplish this is somewhat lacking. I decided to shed some light on a solution to help you out on your journey to success. It’s a simple solution for IE 6, 7, 8 and 9! In order to understand these methods, you’re going to need to understand CSS Conditional Statements in addition to Magento Layouts.

 

IE 7 and Below

 

If you look within the default layout file (design/frontend/base/default/layout/page.xml), you’ll notice that Magento already provides an example of how to recognize IE 7 and below and execute the css/styles-ie.css upon success. If you look around line 55 of the page.xml, you’ll notice a line that looks like this:

 

PS. I broke it up into multiple lines so that it’s more readable.

<action method="addItem">
    <type>skin_css</type>
    <name>css/styles-ie.css</name>
    <params/>
    <if>lte IE 7</if>
</action>

 Basically, all it says is that we’re going to add a CSS file (css/styles-ie.css) if the version of IE is less than 8. If you look at line 5 from the code snippet above, you’ll notice our conditional statement that looks for IE. The condition “lt IE 8″ stands for LESS THAN IE 8.

 

What does this mean? It means that all we’re doing is checking to see if the browser detected is IE7 or older. If it is, include the stylesheet we named (styles-ie.css). If you go back to the CSS Conditional Statements, it will explain the available conditions in more detail.

 

If we want to add an IE only stylesheet, all we need to do is include the snippet above into our page.xml within the head block. Once you update your page.xml, simply go into the skin/frontend/mytheme/css/ directory and add your styles-ie.css file with all your IE7- styling.

 

What about IE 8 and 9?

 

Great! The solution above works for the older versions of IE, but what about IE 8 and 9? Unfortunately, sometimes can be a little tricky when handling multiple versions of stylesheets. We can simply use the above snippet, change the condition for execution, and target another stylesheet for the newer versions of IE. It will look something like this:

 

<action method="addItem">
    <type>skin_css</type>
    <name>css/styles-ie7-and-up.css</name>
    <params/>
    <if>gte IE 8</if>
</action>

 Boom! We changed our condition to if the browser detected is GREATER THAN IE 7! Now all we need to do is go to our skin/frontend/mytheme/css/ directory and add the styles-ie7-and-up.css file with all your IE7+ styling.

 

It’s Not Working

 

Sometimes this solution doesn’t always work for the newer versions of IE and you cant figure out why…Don’t worry, it’s not your fault. Blame Microsoft! If you want to read a little bit more about the problem check out Alan Storm: IE9 fix for Magento.

 

The solution is simple. Basically we’re going to tell the newer versions of IE (8,9) to function as if they were IE7. Hence, our IE7 stylesheet will be all that we need in order to get the styling we need.

 

You do this by adding two tags within your HTML tags. The file you need to edit is either in your design/frontend/base/default/template/page/html/head.phtml or within your current template directory if it exists.

 

Add the following meta tags:

    <!-- set cinoatubake ue 8  -->
       <block type="core/text" name="head.compatibleie8">
          <action method="setText"><text><![CDATA[<meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1"  />]]>&#10;</text></action>
      </block>

 WARNING: It is not recommended to edit the above design/frontend/base/default/template/page/html/head.phtml directly. This is considered a *core* hack if you do. Please read the Intro To Layouts in order to learn out how to make the changes the correct way.