Removing the stubborn compatibility view icon

Yesterday someone I know complained that the layout of our site (leadingcourses.com) was broken in Internet Explorer 9.

Of course my own IE was showing no problems until I was playing with the compatibility view.

compat-view

The button is so close to the refresh button, it happens more than once people click it by accident, breaking the fine layout of a site to something IE7 alike

I was reading some blogs and found that everything was in place already to hide the icon.
But it was still there.
There was no way to get rid of the compatibility view icon. It just would not go away..

Until I remembered I was using the following html tags:

<!DOCTYPE html>
 <!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
 <!--[if IE 7]><html lang="en" class="ie7"> <![endif]-->
 <!--[if IE 8]><html lang="en" class="ie8"> <![endif]-->
 <head>
 ...
 <title>...</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

This is very handy as you just say

.ie7 header {
   background-color: #000;
 }
 .ie8 header {
   background-color: #f00;
 }
 ...

So I have to replace this by doing:

 header {
   background-color: #f00\9; /* IE8 and lower*/
   *background-color: #000; /* IE7 and lower*/
 }
 ...

Reducing the html to

<!DOCTYPE html>
 <html lang="en">
 <head>
 ...
 <title>...</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

This fixed the issue for me, I hope it helps.

Comments

  1. Hi Bjorn,

    Good to know how to get rid of the icon :-)

    Something worth knowing, there is a validating CSS hack to target IE7 directly:

    * html header { .. } /* IE6 */
    *+html header { .. } /* IE7 */

    Might be useful, and hopefully you won’t have to target IE8 specifically.

    • Wow, I think I missed the comment notification :).

      Thanks for you comment. To be honest, I do not support IE6 anymore :-)

Speak Your Mind

*