FOUC problem in IE

HTML & CSS
1

Hi Guys,

I have an issue with HTML5 and IE 7 - 9. I think it is so called FOUC flash of unstyled content issue. It occurs after I add MOdernizr to make IE a bit cleverer in order to understand HTML5. Though I added modernizr link exactly as it is suggested on http://modernizr.com/docs/ it didn’t make any difference and the home page on first load looks broken. After second reload everything except an image slider looks alright.

Drop the script tags in the <head> of your HTML. For best performance, you should have them follow after your stylesheet references. The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.

So if anybody has an idea how to solve it I would be very happy if you want to share it with me. Also about the image slider. It disappears on IE 7 - 8.

The website URL: http://abstainers.dnsalias.com/

Thank you.

2

Hi,

I just see a very broken page in IE7 - 9 that doesn’t get any better on refresh at all. The main problem is that you have some code above the doctype which will throw all versio0ns of IE into quirks mode and behave much like IE5.


<script language='JavaScript'>
            <!-- 
            document.location=";
            //-->
            </script>

Remove that code or place it where it should be as it looks like a broken fragment from somewhere.

I didn’t see your link to the html5 shiv that ie8 and below need in order to recognise html5 elements unless you have it hidden away in one of your scripts.

Fix those issues first and then re-test. It may narrow the problem down.

Edit:

I believe moderniser contains the shiv for IE anyway so you don’t need the extra shiv. However you should ensure that the js is above the css in the html otherwwise there won’t be anything created for IE to style and is probably why you get the FOUC.

3

Thanks for the reply. It did really help. It was my bad mobile detection.

There is still one problem, the image slider. It’s working well on IE9, but disappears on everything below.

4

It may not have anything to do with it but you have an error in your script here:


  coucou
	function rotator_display_count108(banner_id, advertiser_id, campaign_id, type)

SCRIPT5009: ‘coucou’ is undefined
abstainers.dnsalias.com, line 86 character 18