CSS not applied on first load

Hello everyone,

I am not sure if I am posting this to the right area but here goes:

I have a problem that I have not seen before. I have a Web Project in .net 2.0 (not website) I am using Visual Studio 2005. I have the following in my <head> section:

<title>Payment Processing</title>

When the page first loads, either in the local ASP.Net Development Server or when published to IIS, all styles are completly ignored. I do kow for a fact that the page is loading the styles because I am using fiddler. Fiddler tells me the styles.css is loading. I know for a fact that all the styles are correct because if I press F5 to refresh the page the styles are applied perfectly. This behavior occurs on two different PCS (when published to IIS 5.1) However, when published to IIS 6.0, the styles are applied perfectly. Is there any rhyme or reason for this? Ultimately, I only need it to work under IIS 6 but I would like to know why it doesn't work in IIS 5.1 and the .net Development Server.

Any ideas?

Thanks,

John

Re: CSS not applied on first load

Try forcing a cache refresh on your browser (ctrl + F5), there is a chance your browser may be using an older cached version of the StyleSheet.

Re: CSS not applied on first load

Hey Adam, Thanks for the reply. I went ahead and tried what you said but that didn't work. Going down that road I went ahead and deleted all my temp internet files, closed the browser and launched the project again. The same thing occured. Also, this did occur on a different pc and continues to occur. The issue is occuring in Firefox as well.

Thanks again for the advise though,

John

Re: CSS not applied on first load

Try loading the StyleSheet into your browser (http://yourServerName/yourAppName/StyleSheet.css).

Does it work? Do you receive the correct StyleSheet.css?

Re: CSS not applied on first load

Hey Adam,

I just double checked and yes I am. I also loaded it with Fiddler running and viewed the css file from there and matched it up. Fiddler is loading the same file when I launch the app as well as when I type it into the address bar. It is really an odd issue and its something that I dont need to fix because if I refresh the page it applys the styles correctly. Even when the styles are not applied I do know it is loading the stylesheet because of Fiddler. My first guess was the style sheet was not loading at all but Fiddler proved me wrong. In our production environemt with IIS 6 I dont experience the problem. Its really strange.

thanks again,

John

Re: CSS not applied on first load

Does your StyleSheet contain any bugs? Try running your site on Firefox with the Firebug add-on enabled - if your StyleSheet has errors this little add-on usually catches them.

Are you using the site through the same browser when viewing the server and local sites?

Re: CSS not applied on first load

I didnt notice any errors in the style sheet before (I have firebug installed previously because it is great!) I went into Firefox just now to double check and Firefox did an update. Problem is no longer occuring in the latest version of firefox but is occuring in I.E. I was using the site though different browsers before for both local and server sites (Used both I.E. 7 and Firefox)

Thanks,

John

Re: CSS not applied on first load

That's so weird!

Let's rehash this problem:

Your StyleSheets aren't applied to your site on the first load, but on subsiquent loads your StyleSheets are loaded, and your site is rendered properly. This behavior happens on both IE and Firefox. We can run the local and deployed version of the same site in the same browser, but the local site always fails to render the site properly (presumably it's failing to load the StyleSheet), and the deployed version always works correctly.

Does that about sum it up?

By chance, are you using ASP.NET Themes? Are you dynamically adding styles through your code behind?

Re: CSS not applied on first load

Hey Mark,

Yes, its the weirdest thing ever!

"Your StyleSheets aren't applied to your site on the first load, but on subsiquent loads your StyleSheets are loaded, and your site is rendered properly" - Yes

"This behavior happens on both IE and Firefox" - Before was happening in both IE and Firefox until Firefox did an update. Now only happening in IE. I just double checked this and yes, only happening in IE.

"We can run the local and deployed version of the same site in the same browser, but the local site always fails to render the site properly (presumably it's failing to load the StyleSheet), and the deployed version always works correctly." - Yes, fails to apply the stylesheet on first load in Internet Explorer only. Deployed version always works correctly only in IIS 6.0 (But this might not be an IIS 6 issue as II6 is on a different box, II6 5.1 and the .net Development server are both local. Fiddler shows the style sheet being accessed when the page loads the first and subsquent times, IE just doens't apply it the first time.

So yup, that about sums it up. Themes are not being used and the styles are being applied though code behind via two methods:

td1.Style.Add("border-bottom", "1px solid black;"); OR default items like:

A { color:#000080; text-decoration:underline; } or

.legend

{

font-family:Verdana;

color:Maroon;

}

The first, Style.Add() is rendering correct on first load and each additional loads. The other items as defined in the style sheet are not getting rendered. However, I just noticed something more interesting. The only styles that are not applied are styles that get appplied to text and links. But as I look at this further, I think the reverse is happening but in my mind I think its not loading correct the first time when it looks like it might be the other way around. Example:

<td align="right" style="height: 22px"> Reverse Lookup by Invoice Number: </td>

I have no class attached. However, there is a class attached to the parent outer td:

What I mean by parent outer td is: <table><tr><td class="blah"><table><tr><td>Reverse Lookup....</td></tr></table></td></tr></table>

The trContent is defined as

.trContent

{

background-color:#e1e1e1;

font-family:Verdana;

font-size:small;

font-weight:normal;

padding:1px;

}

This style for the font is applied to the text, "Reverse Lookup by Invoice Number" only on the second and so forth page loads, never on the first in IE 7 on my local machine running in either IIS 5.1 in th .net Development Server but the style is always applied on first load on a remote server on the network in IIS 6

Of course, this is a simplisitic explamation of what is happening. So I think what may be happening is on the first load, the page is showing correctly and on the second and each additional load it is picking up an already used style from someplace else which technicaly it should not be doing. However, this is an odd explamation, perhaps not even correct and if it is the reason, it doesn't explaim the odd behaivor of why it works as I expect it to on a different server in IIS 6. Working in Firefox and not IE is a different issue as you know broswers implement things differently, I just would expect some consistensity between IIS 6 and so forth in the same browser.

I really dont know, Im happy that its working where its suppose to (in IIS 6) but I always just like to know the "why" to it.

Thanks!

John

Re: CSS not applied on first load

Is it possible that when you first load the page the Web Dev Server does not receive a compiled version of the Style code or maybe it isn't being compiled just in time?

I have the cache problem with the browser all the time but have never seen this. Since you are adding styles in through code and the deployed solution works I have to wonder about the Web Development server.

Re: CSS not applied on first load

Your guess is as good as mine, it has to be something with the Web Development Server

Re: CSS not applied on first load

Any chance you can make this site live, so we can take a look at this weird behavior ourselves?

Re: CSS not applied on first load

Unfortunenly I cant make it live since it is an internal intranet. However, even if I could publish it live on our server external, it would show perfectly fine as the problem is on my local computer not our production web server.

Re: CSS not applied on first load

Hello, did you every find the solution to this problem?
I have the same problem.
Except I'm getting the same results on both the Development Server (VS 2005 Development IIS) and my Production (IIS 6.0) server. Seems to affect IE7 and not Firefox.

Mine is a big project on a corporate site behind a login so I can't get an example for you.

It is weird, I load the page the first time and use debugbar to look at the dom and the css files loaded.
The styles are all there in the html but not displayed on the page.

I did notice that the styles are inserted in the body of the page and not in the header would this be causing the problem?
e.g.
<SPAN id=QuoteTrackerStyleSheetHolder style="DISPLAY: none"><LINK href="/Grid/Skins/Default/Styles.css" type=text/css rel=stylesheet></SPAN>

The problem happens on the production server until the css file is cached. (e.g. the first time you load the page after clearing the cache the styles are not applied)
It happens on the VS2005 Development Server too but because I'm in debug mode I see it a lot more because the css files are not cached between builds.

Other things to note.
The css is the skin style for a third party control "Telerik Radgrid" and it's on a usercontrol that is being loaded onto the page via AJAX.

Re: CSS not applied on first load

Your styles are inserted in the body of the page?!?!

That could definitely be the problem, externally linked stylesheets should always be in the HEAD of your document. You can get away with placing embedded Style blocks within your markup, but having externally linked style sheets within your document may have some weird side effects.

As I understand the Externally linked style sheets are loaded into the web browser first (since they're in the head), then applied to the document markup as it's being rendered / loaded. If the browser were to hit an externally linked stylesheet reference within the document it would have to stop loading the page, then reload the whole page again to have the styles applied, but it doesn't, instead it just keeps rendering the page without applying the StyleSheet.

If you wanted to load stylesheets from within your document's markup you may want to look into using JavaScript to manipulate the StyleSheets or defining a ContentPlaceHolder in the head of your document for loading / unloading StyleSheets.

If you want to learn more about how StyleSheets and Styles are applied in the Browser, then check out this video: An Inconvenient API: The Theory of the DOM

Re: CSS not applied on first load

I never found a solution to my problem but what Adam.Kahtava says may help as a solution for yours. Mine is just an annoynace as it only happens in my local test environment, not in production. Good luck!

Re: CSS not applied on first load

Hi there !

I had the very same "problem" but solved it.

My call for the css class was in the head as it should,
but as my site was an ASP site with a pretty heavy query above in the code I found that this made the site just a litte to loaded when loading the page the first time.
With a refresh directlyu after the first load the page loads faster due to cash and by that the css got loaded.

The solution was to move the call for css even before the head and query, after that it worka fine ! [:D]

Re: CSS not applied on first load

This may not be your issue since it's not isolated to Cassini, but I thought it may help others reading this thread. I ran into a similar issue while debugging and this article explained it perfectly.

http://weblogs.asp.net/scottgu/archive/2006/01/31/437027.aspx

Re: CSS not applied on first load

This might help someone.

We had a similar problem: After a complete site re-design we noticed that in Firefox and IE, the first time you show up to the page the CSS styles were not being applied. However firebug showed that they were downloaded, also we had no errors. However upon Refresh the styles were applied and rendered properly.

The Solution: Even though the site re-design was completely new, out of habit our file structure and naming was consistant. Therefore being our NEW style sheet code was completely different but had the exact same file name and folder location as the OLD site.... the browser was trying to use the OLD cached copy of the CSS on first load, however on refresh is forced the use of the newest one.

The Result: We changed the new css styles name, and everything is fixed. This was important to do because we have return visitors that surely were getting the same problem... and most people are hmmmm "clever" enough to hit refresh when the site loads weird, they just go away.