A

Anonymous

Question

Cross Browser Issue - IE9

Forum|Forum|12 years ago
October 3, 2013
7 replies
3095 views

I getting problem onvmy landing page for the IE 9 browser. For Chrome, Firefox and IE8 it was fine but for IE9 the tet overlap to the form. See image below. The form has a jquery code that use to provide spacing to each fields.

Please let me know if you encounter any issue. Thanks!

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

A

Anonymous

It is a design issue, unrelated to Marketo and/or Design Studio.

It is likely the page is missing the Internet Explorer compatibility meta tag:

valid modes are:

"IE=edge"

"IE=10"

"IE=EmulateIE10"

"IE=9"

"IE=EmulateIE9

"IE=8"

"IE=EmulateIE8"

"IE=7"

"IE=EmulateIE7"

"IE=5"

It is documented by Microsoft:

http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx

Quoted from Microsoft

--- start of quote

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

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.

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.

As of Internet Explorer 10, quirks mode behaves differently than it did in earlier versions of the browser. In Windows Internet Explorer 9 and earlier versions, quirks mode restricted the webpage to the features supported by Microsoft Internet Explorer 5.5. In Internet Explorer 10, quirks mode conforms to the differences specified in the HTML5 specification.

--- end of quote

Please let me know the landing page name in order to help you identifying the root cause.

A

Anonymous

Hi Breno,

Here is the name of my landing page:http://ins.accenture.com/TechnologyVision2013_ContentRegistrationDemo-RVO_InsRegPage.html

i appreciate your help!

A

Anonymous

Looks like Marketo adds some JavaScript immediately after the opening <head> element at page run-time for the Pre-fill functionality. This causes the IE compatibility meta tag to be pushed down a few lines after JS execution, which I'm noticing IE disregarding the tag altogether. I've compared with a page that uses the same template but doesn't have any pre-fill functionality and THAT page loads the compatibility mode fine.

My suggestion is that Marketo place the pre-fill code a little farther down in the <head> section so the compatability mode can be set without interference.

A

Anonymous

I tried using the code provided in this thread and we are still having issues in IE9 only.
http://info.trendsource.com/TrendSource_ContactUsv2.html

A

Anonymous

Same issue for me with IE9 and form 2.0

A

Anonymous

Please vote on changing the placement of the prefill <script> here:

A

Anonymous

A workaround exists, but it is an unfortunate loss of functionality:

Internet Explorer (v9, v10, v11) can handling modern style rendering with a combination of <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> and disabling the "prefill" feature when creating landing pages.

Roughly speaking, do the following to disable the prefill feature:

Edit Draft for some Landing Page -> Menu -> Form Settings -> uncheck the "Enable Form Prefill" option

I'll trust that template HTML developers will also know what to do for Internet Explorer at the mention of the <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> meta tag.

Good luck.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded