Monday, August 13, 2012

How To: Remove IE7 compability view from your Blogger template

Recently, Disqus has published a help doc for Disqus 2012 that explained that IE7 is currently not supported in Disqus 2012. Many blogger sites have templates that tell IE to render the page using IE7 standards, and this creates a lot of problems, not just for Disqus 2012.

IE7 is starting to become a really old browser, and right now Microsoft recommends you are on IE8 (for Windows XP), or on IE9 for Vista and 7. Also, newer versions of IE do have more standards support set by W3.

Today I am producing a tutorial showing you how to remove this tag. I will talk about the risks of this after the tutorial. Although, there aren't many risks. For this tutorial, I will use one of my old blogs, Michael's Tech Tips, which merged with Techman's World a few months ago.

  1. First up, open your Blogger Dashboard, and select your blog. Navigate to the Template section.
  2. Click the edit HTML button. Confirm the warning. If you want, you can back up your template in case something goes wrong. Make sure you select "Proceed". You can not do this via the template designer.
  3. Look at the first few lines of the HTML. One of the first lines should be the IE7 META tag. I'll draw an arrow to it if you want to just see the tag and not search for it. Ignore the "refresh" tag, because I added that to redirect to Techman's World. This is why the live view thumbnails show Techman's World.
  4. Select the at line, and then press backspace to remove it.
  5. Lastly, save the template.

As you can see, the live view thumbnails for the site is now Techman's World. That is because of a refresh meta tag that redirects the site to Techman's World.
This is the HTML warning. Click Proceed. Do not open the template designer, because the template designer will not make these changes.
Make sure you remove the line that highlighted. You do not have to touch any other line. You can click this photo and any other one to enlarge it.
There, I have removed the line. You can see my cursor on the line before it, showing the line being removed.
There are almost no risks involved with this. All this really does is tell IE to not render in IE7 standards. If you do not want to remove the tag, you always replace IE=EmulateIE7 with IE=edge.

Now there is another risk you might take when you remove this tag, and that is IE9 compatibility. Make sure you test your site in IE9 using IE9 standards by pressing F12 when on your page and make sure that the user agents are both IE9. Make sure it is not set on IE9 compatibility. If your page appears fine, then you are ok. If something does not render correctly, then you have compatibility issues with IE9. You will either have to correct those problems yourself, or go back to using the IE7 render tag. You could also switch templates, but I don't personally recommend this, and it still might not solve your problems.

Hope you all enjoyed this tutorial, if this has helped you, or have any thoughts on this, let me know of your responses in the comments below.