brief loss of styling when using site navigation IE8 & older

[ggeoff]

Hi

Whilst I have checked both the HTML and CSS for errors and have found none I have an issue with rendering using IE8 and IE7. IE9 is fine as are the other browsers. When I click on the navbar, the display loses all styling and displays for a second or less a default white background and text stretching across the full width of the display. Since my website background is a very dark shade of grey, almost black, the effect is most unpleaant. Has anyone any idea why this is happening?

Geoff

[ggeoff]

Hi

Whilst I have checked both the HTML and CSS for errors and have found none I have an issue with rendering using IE8 and IE7. IE9 is fine as are the other browsers. When I click on the navbar, the display loses all styling and displays for a second or less a default white background and text stretching across the full width of the display. Since my website background is a very dark shade of grey, almost black, the effect is most unpleaant. Has anyone any idea why this is happening?

Geoff

Apparently, this a FOUC flash of unstyled content and it is documented in Wikipedia which references http://bluerobot.com/web/css/fouc.asp/#footnote1 I find it only affects IE and it is a result of using the import statement for the css stylesheet. My head code is:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>my website</title>
<style type="text/css" media="all">
<!--
@import url('stylesheet.css');
-->
</style>
<!--[if !IE 7]>
	<style type="text/css">
		#outerwrapper {display:table;height:100%}
	</style>
<![endif]-->
<style type="text/css" media="print">
body {
  color: #000;
  background-image: none;
  border-color: #000; 
  background-color: #fff;
}

</style>
</head>

does anyone have a suggestion as to how I can amend the code in the head section?

Thanks Geoff

[Matthew N.]

You could use the

<link />

property.
Example :

<link rel="stylesheet" href="stylesheet.css" media="all" />

That is the only way of including a stylesheet without import queries.

[ggeoff]

You could use the

<link />

property.
Example :

<link rel="stylesheet" href="stylesheet.css" media="all" />

That is the only way of including a stylesheet without import queries.

Thanks Matthew N

That works, not entirely there is a brief flash of unstyled content but at least now the content cannot be seen. I suppose if the backgroiund was lighter it would hardly be noticed at all.

Geoff