Issue:
If you have rendering issues in IE (including compatibility mode) with landing pages that have forms, I suggest reading on. Currently Eloqua saves a large amount of inlined CSS (that resets form styles) towards the top of the <head> tag on pages with forms. Normally this isn’t a problem, however it stops some <meta> tags, such as: <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> that are crucial in rendering pages consistently in IE, from functioning properly. Some meta tags such as this are required to be placed in the first few bytes of the HTML document. The inlined CSS from Eloqua exceeds this byte volume and causes the meta tag to not function. So you think by moving the meta tag above this minified CSS would solve the issue? It doesn’t. Your meta tags are automatically moved back below the CSS when the page is saved.
Inlined Form Reset CSS that Eloqua auto-magically generates on landing pages with forms that are dragged in.
Temporary Solution:
So I propose a solution that is more like a band-aid until a real solution from Oracle comes our way.
- Copy the existing CSS from <style> to </style> tag. Make sure not to select the HTML comments “<!– StartFormCustomCSS–>” and “<!– EndFormCustomCSS –>” as this is what Eloqua uses to read this snippet and will place it back at the top between the two HTML comments.
- Enable Legacy Form Rendering in the “Forms” setting pop up window and save.
- Re-open the landing page, notice the CSS at the top of the page is now gone.
- Copy the minified CSS code from step one behind the meta tags you are using and right before the ending </head> tag.
- Save. Enjoy not having as many rendering issues on IE and clients with compatibility mode enabled (internal users).
Use Case:
So who should use this? Anyone who has internal employees looking at landing pages created in Eloqua and have customers on older versions of IE. I suggest using: <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> meta tag on all pages that you create as this forces IE to render using the latest render engine the browser has regardless of version. Also anyone who has a need to implement meta tags at the very top of the document will need to use this method as well. Otherwise the meta tags won’t be read.