Lots of webpage are not coming fine in IE. But It is working fine in Chrome.

[sunitac2231600]

Dear Experts,

I have a webpage called abc.html.

It is coming fine in Chrome. It is not coming fine in IE.

Also It is coming fine in author mode. But It is not coming fine in Publish.

When I am changing Document Mode IE9 standards, then It is coming fine, as seen in below screenshot.

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

It will be great If somebody can help me on this.

Thanks in advance !

NOTE : I am using IE 10

[smacdonald2008]

Looks like a JS issue somewhere. See this related Stackover flow thread - its talks about IE8: 

http://stackoverflow.com/questions/15027978/why-wont-ie8-render

[Lokesh_Shivalingaiah]

Which version IE are you using ?? 

This could potentially be the CSS issue as it needs its own style to be compatible with prev version of IE

[sunitac2231600]

bsloki wrote...

Which version IE are you using ?? 

This could potentially be the CSS issue as it needs its own style to be compatible with prev version of IE

Hi,

I am using IE 10.

[Lokesh_Shivalingaiah]

As mentioned by others IE behaves differently in each of its versions. You will have to fix in your CSS. If you have an UI team, please work with them

[sunitac2231600]

I am from UI team only. And this is working fine in author mode but not in publish.

I do not have access to Publish server. 

If it is a CSS issue, then it should not come fine in Author mode also. 

Could you please tell me where to change CRXDE Light?

[edubey]

Hi Sunita,

Can you please share a screenshot from IE 10 where its not working and one from where its working. ( of the same page) ?

It will help to get more idea on issue

[edubey]

Also in author mode can you verify the behavior by using parameter ?wcmmode=disabled

[sunitac2231600]

Hi Ebu,

My website is not coming fine in IE 10, as shown in below screenshot (IE 10)

But it is coming fine in Chrome, as shown in below screenshot (Chrome)

Also It is working fine in ?wcmmode=disabled

[edubey]

Can you please do Inspect Element in IE 10 and see whether that text is present in DOM element. If its not present that it will be component issue.

[sunitac2231600]

Hi Edu,

Do you want me to check the document in Document mode?

If In document mode , what I need to check. Can you please tell me more "or" send me the screenshot.

[edubey]

Hi Sunita,

I want you to check in DOM Explorer of IE to see whether text is present or not there

[sunitac2231600]

Yes, It is coming in DOM Explorer, but in style It is coming as visibility hidden only for IE, as shown in screenshot.

But For chrome, Its coming fine.

[edubey]

As you could see, it has to be fixed by CSS

One more option you can go for is to set the visibility to visible via JS for this element.

[sunitac2231600]

Hi Edu,

I can do it in CSS. It is fine.

Could you please tell me how can I do it in JS for "visibility to visible via JS for this element. "

[edubey]

Assign a Id to you text which is getting hidden example

<h2 id="headertext"> my banner text </h2>

then, write JS similar to 

var x = document.getElementById("headertext");

x.style.visibility="visible"

[Lokesh_Shivalingaiah]

Best way to handle this in a simple way is through CSS

I think assets.css is your css file or in your main css file add 

H2{

visibility: visible !important

}

along with other styles you have.

[Jitendra_S_Toma]

Hi Sunita,

There are uncounted number of issues with IE browser specially below IE10. The website does not work as it suppose to when you are testing with different browser mode & document mode. Ideally, both modes should be identical. So, verify whether your side works or not if both modes are same.

As you know, IE8 & IE9 does not work with HTML5, So, you might require some third party frameworks like Modernizr javascript, html5shiv etc.

https://github.com/afarkas/html5shiv

https://modernizr.com/docs

Jitendra

[kautuk_sahni]

Hi 

Which version of IE you are using? I would recommend you to upgrade you IE.

//Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE 9 or IE 8, then I would recommend using the tag. If you only support the latest browsers (IE 11 and/or Edge) then I would consider dropping this tag altogether. 

 To understand what each means, here are definitions provided by Microsoft:

Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:

• Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9. Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:

• IE11 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.

• IE10 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.

• IE9 mode provides the highest support available for established and emerging industry standards, including the HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 Specification (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, and others. [Editor Note: IE 9 does not support CSS3 animations].

• IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.

• IE7 mode renders content as if it were displayed in standards mode by Internet Explorer 7, whether or not the page contains a directive.

• Emulate IE9 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE9 mode and quirks mode directives are displayed in IE5 mode. Unlike IE9 mode, Emulate IE9 mode respects the directive.

• Emulate IE8 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE8 mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the directive.

• Emulate IE7 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the directive. For many web sites, this is the preferred compatibility mode.

• IE5 mode renders content as if it were displayed in quirks mode by Internet Explorer 7, which is very similar to the way content was displayed in Microsoft Internet Explorer 5.

I would recommend you to use :

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> serves two purposes.

1. IE=edge: specifies that IE should run in the highest mode available to that version of IE as opposed to a compatability mode; IE8 can support up to IE8 modes, IE9 can support up to IE9 modes, and so on.
2. chrome=1: specifies that Google Chrome frame should start if the user has it installed

The IE=edge flag is still relevant for IE versions 10 and below. IE11 sets this mode as the default.

Link:- http://stackoverflow.com/questions/22059060/is-it-still-valid-to-use-ie-edge-chrome-1

I hope this would help you.

Thanks and Regards

Kautuk Sahni