SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FOUC problem in IE

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <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. #3
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It may not have anything to do with it but you have an error in your script here:

    Code:
      coucou
    	function rotator_display_count108(banner_id, advertiser_id, campaign_id, type)
    SCRIPT5009: 'coucou' is undefined
    abstainers.dnsalias.com, line 86 character 18


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •