CSS sometimes does not load properly on initial load

views:

330

answers:

+1 Q:

CSS sometimes does not load properly on initial load

Sometimes the header of my website does not form properly when I first load a page.

Incorrect:

In the screenshot below the headings are inside the black horizontal line

alt text

After refreshing the page, there is space below the headings:

alt text

This issue has been seen on several pages, not just the one I have taken a screenshot of (http://www.getmecooking.com/blog/review-of-food-bloggers-connect-london-november-2009)

Please can you tell me why this might be occurring and how to resolve it?

Thanks.

+1 A:

If you don't use the @imports does it still happen? Just include the stylesheets in the page directly and see if it makes a difference.

thenduks 2010-02-07 01:03:20

I can try that, the problem is that the issue is intermittent so I am not able to test it reliably. If it turns our that doing this resolves the issue, what would the proper fix be? Thanks.

Techboy 2010-02-07 12:27:20

If it fixes the problem (which btw I was able to reproduce in Firefox 3.6 on Linux) then the proper fix is to leave it fixed :)

thenduks 2010-02-07 15:49:31

I wouldn't be keen on having all of the CSS within the page though :-) I have read http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ which says that 'link' gets multiple CSS files in parallel and '@import' gets them sequentially, so link is faster. Plus the 4th comment there says that switching to link resolved an issue which sounds similar to the issue I am experiencing, so I will try that first :-)

Techboy 2010-02-08 12:40:35

What I'm suggesting is using `link` instead of `link` with `@import`s. So yea, I think we're on the same page here.

thenduks 2010-02-08 14:53:27

I have moved to link, but I still intermittently see the issue :-(

Techboy 2010-02-10 19:48:39

+1 A:

it seems like you CSS file is loading. the problem seems to be a {position: } issue. i've faced the similar problem with elements that are absolute positioned but are not contained in another div which is relative positioned

pixeltocode 2010-02-07 01:24:05

Good thought, but the only absolute position I have on the page is for the AddThis menu, which is below the header div. So I don't think that is an issue. Thanks.

Techboy 2010-02-07 12:25:20

We identified a DB issue that was intermittently causing the dynamic content of pages to load a little slower than normal. Fixing that seems to have fixed the CSS issue!

Techboy 2010-04-02 11:57:23

ansaurus

tags:

views:

answers:

CSS sometimes does not load properly on initial load

related questions