CSS Initially Doesn't Load - IE8

css and ie8

[againstit]

The issue I am having is with IE8 loading my external .css file. On the first visit to the site no style sheet loads with it, however, if I refresh the site, visit one of the internal site links, or even open a new tab and re-enter the site address, everything loads fine.

I have checked html & css validation on the site, but nothing seems to explain this. I was hoping that maybe someone else had run into the same problem or had some ideas as to what might cause something like this to happen.

CSS loads fine in Chrome & Firefox. I even downloaded a utility that supposedly checks compatibility for different versions of IE, but the site loads fine for all versions within this utility.

Thanks in advance for any suggestions!

TF

[Major_Payne]

Are you using IE's Conditional Statements [msdn.microsoft.com] to load a separate CSS file for IE8 only? Or, is it a common CSS file for all browsers?

I quit using IE years ago, but there may be a cache option within Internet Options for IE that needs to be set/changed. Hard to say without looking at the CSS and the CSS link tag(s) you are using.

IE 9 Beta [windows.microsoft.com] is out now if you wish to try it, too.

[againstit]

CSS is common for all browsers.

<style type="text/css" media="screen">

<!-- @import url(******/style.css ); -->

</style>

I don't use IE at all either, but obviously I can't have every visitor change their cache settings in order for the site to load properly. :) -- Unless you are saying there is someway to accomplish this through coding.

Thanks for your input.

TF

[againstit]

Also, I'm not sure if this is helpful, but my metatag is:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

If anything else would help find a solustion I'll be happy to provide it.

Thanks,

TF

[Major_Payne]

I don't quite understand why you are using the style tags like you have them coded (<!-- @import url(******/style.css ); -->)? The CSS should be placed between the style tags. Not the way you have it. Some browsers may balk at that method.

If you are using a common CSS file, then this is what should be placed between the head tags:

<link rel="stylesheet" type="text/css" href="folder_name/style.css" media="screen">

Using the style tags between the head tags is embedded CSS and really good only for a page or two that is styled differently from each other. Even then a separate CSS file should be used and linked to.

[againstit]

To be honest, this is a modified Wordpress theme, so it was already coded that way. It had always seemed to work just fine so I left it alone.

The good news is that replacing that code with yours did the trick. I very much appreciate you taking the time to share your knowledge.

[Major_Payne]

You are very welcome. Thank you for letting me know it solved your problem.

Ron