I have observed that, very infrequently, Internet Explorer (7 or 8, it does not matter) displays our web pages (http://www.epsitec.ch) a short time without applying the CSS. The layout appears completely broken, with everything displayed sequentially from top to bottom. When the page has finished loading, everything finally gets displayed properly.
Our web pages do not use any fancy scripting, just two javascript inclusions for QuantCast and Google Analytics, done at the end of the page. By the way, we already had the issue before adding the QuantCast script. The CSS gets linked in the <head> section:
<head>
<title>Crésus Comptabilité</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.epsitec.ch/favicon.ico" />
<link href="../../style.css" rel="stylesheet" type="text/css" />
...
</head>
and then follows static HTML up to the final chunk which includes the JavaScript:
...
<div id="account">
<a class="deselect" href="/account/login">Identifiez-vous</a>
<script type="text/javascript">
_qoptions={qacct:"..."};
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js">
</script>
<noscript>
<img src="..." style="display: none;" border="0" height="1" width="1"/>
</noscript>
</div>
<div id="contact">
<a href="/support/contact">Contactez-nous</a>
</div>
<div id="ending"><!-- --></div>
</div>
<script type="text/javascript">
...
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("...");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
As this is a very short visual glitch, I have no idea what provokes it. Worse, I cannot reproduce it and it appears only on seldom occasions. How can I further investigate the cause of the glitch? Are there any best practices I should be aware of?
This is called a FOUC, a Flash Of Unstyled Content, and is well documented and explained here: http://www.bluerobot.com/web/css/fouc.asp/