I have a website which uses CSS to place the page elements in the right positions (absolute positioning). Using DIVs i restrict the spaces for each section of the page and float to align them. But i've noticed that when a page is requested, the elements are displayed in the way that source code is read and when the CSS kicks in, the elements are then properly formatted. Now this is a nuisance and i would like to know if something can be done about it. I'm using @import url(styles.css); syntax. PS: The time taken for the CSS to kick in is about 2-4 seconds but it is highly noticeable. So if any of you had the same problem, can you please share the solution?
It's probably because your CSS file is huge. You could try compressing it and see if it solves the problem?
Using link rel should sort it. Google 'FOUC' as well. <link rel="stylesheet" type="text/css" media="screen" href="/css/screen.css"/> Code (markup): 19k is quite a large CSS file, but if it's a full site with lots of pages, then it isn't too bad.
Agreed - what AdamSee says is right - Google 'FOUC' or 'flash of unstyled content' for many pages that should help you.
Thank you for your replies. I will change the @import to 'link rel..' and test to see if it really works.
http://www.bluerobot.com/web/css/fouc.asp "Just one LINK element or SCRIPT element inside a document's HEAD element will prevent a flash of unstyled content." works for me