Question

We have created a new website based on HTML5. With elements like <header>, <nav>, <section>, etc...

It is a pretty straightforward implementation in Tridion 2009 SP1. This means that most of the site is not dynamic, but built up by Tridion Templating. One of the benefits is that the content managers can use the preview functionality.

However, since the content managers are restricted to use IE8 we have to use something like Modernizr.js to format the HTML properly.

This is where the fun ends... Works fine on the website itself, but not in the Tridion Preview screen. It almost seems like it is not picking up the Javascript.

Any ideas, besides creating different preview HTML and CSS?

Was it helpful?

Solution 2

The answer was already in the question and unfortunately not an easy answer.

This issue seems to be only an issue for the older IE browsers (everything below IE9).

I ended up making a different preview CSS in combination with different HTML. All the HTML5 elements such as: <nav>, <header>, <article>, <section>, <aside>, etc... were changed into <div class="html5elementname">.

Cumbersome work, but the only way using IE8/IE7 and HTML5 for Tridion 2009 Preview.

OTHER TIPS

I haven't used HTML5 with 2009 SP1, but on 2011 SP1 HR1 it was working fine for us. Not sure why that difference would be there though. The 2011 UI is of course quite different at some points, but I think the preview has always been inside an iframe which should work just fine. Mind you using 2011 would also allow you to use Chrome and Firefox so I surely can recommend the upgrade.

There is one thing we have been struggling with for HTML5 on IE, which is the compatibility mode. I never touch the button, but since its right next to the refresh button, I've noticed a lot of ppl accidentally turn it on. After doing that your browser will revert back to IE7 mode, which is something which didn't work well for our HTML5 design even with the help of modernizr. Could it be that its not so much 2009 which is your problem, but the compatibility mode which is turned on?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top