Magento 1.8 – How to Edit Code for IE Compatibility

magento-1.8theme

I am unable to resolve this issue. My website www.cartdeal.com is showing ]> at beginning of the webpage. I was struggling hard to find where this icon is coming from. Found the difference between my localhost website and live website. The difference is in the following line <!--[if <!--[if (gte IE 9) | (IEMobile)]><!-->]>. Does anybody where this code is located in magento as i am unable to locate the code. I just need to edit the last two characters to get rid of this problem.

I have tried and edit the page.xml file

            <!-- Add stylesheets with no media queries for use in IE 8 and below -->
            <action method="addItem"><type>skin_css</type><name>css/styles-ie8.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>
            <action method="addItem"><type>skin_css</type><name>css/madisonisland-ie8.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>

            <!-- Add stylesheets with media queries for use by modern browsers -->
            <action method="addItem"><type>skin_css</type><name>css/styles.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!--><]]></if></action>
            <action method="addItem"><type>skin_css</type><name>css/madisonisland.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if></action>

But the same is code is working on my localhost and showing ]> tag on live server.

EDIT

In addition to this, when i click the 'View page source' button, i see that there are some changes in the source code that is appearing on my localhost and live magento hosting on godaddy.

On Localhost the code is

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" id="top" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" id="top" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" id="top" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" id="top" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" id="top" class="no-js"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cart Deal</title>
<meta name="description" content="Online Shopping of Apparels, Men &amp; Women Clothing, Footwear &amp; Accessories. Electronic &amp; Mobile Store." />
<meta name="keywords" content="Apparel, Clothing, Mobile" />
<meta name="robots" content="INDEX,FOLLOW" />
<link rel="icon" href="http://127.0.0.1/magento/media/favicon/default/logo1.png" type="image/x-icon" />
<link rel="shortcut icon" href="http://127.0.0.1/magento/media/favicon/default/logo1.png" type="image/x-icon" />

Whereas on live magento it is

<html style="" id="top" class=" js no-touch localstorage" lang="en"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cart Deal</title>
<meta name="description" content="Online Shopping of Apparels, Men &amp; Women Clothing, Footwear &amp; Accessories. Electronic &amp; Mobile Store.">
<meta name="keywords" content="Apparel, Clothing, Mobile">
<meta name="robots" content="INDEX,FOLLOW">
<link rel="icon" href="http://cartdeal.com/media/favicon/websites/1/cart.png" type="image/x-icon">
<link rel="shortcut icon" href="http://cartdeal.com/media/favicon/websites/1/cart.png" type="image/x-icon">

I think the problem can be resolved by amending the live hosting code and replacing it with the same as appearing in the localhost. But unable to find the file where i can do the changes. How can i add
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" id="top" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" id="top" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" id="top" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" id="top" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" id="top" class="no-js"> <!--<![endif]-->

above the head section

Best Answer

What is contained between <!-- --> is interpreted by the browser as a comment. Even if it may be interpreted by some browsers differently the rule is the same "You cannot have a comment inside a comment".
So your line is interpreted like this:

<!--[if <!--[if (gte IE 9) | (IEMobile)]><!-->]>
  |                                          ||  
  |                                          ||---output
  |--- comment start                         |--- comment end

That's why you see the ]> at the top of the pages. It is interpreted as output.
The correct use of the <if> tags when adding stylesheets is this:

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

So you have to put only the condition inside the <if> tag. the comment tags will be added automatically by Magento in Mage_Page_Block_Html_Head::getCssJsHtml.
So try it like this:

<action method="addItem"><type>skin_css</type><name>css/styles.css</name><params/><if>(gte IE 9) | (IEMobile)</if></action>
Related Topic