CSS delay when page is opened

I have set up a site with an external style sheet, my client is complaining about the split second when the page is viewed before the style sheet kicks in, (an un-styled webpage) . Does anyone know a way around this? They are demanding it to be amended, I really don't know what else to say to them!!! Please help! Anyone!

http://www.presentwithimpact.co.uk/

 

loads fine here, ff2 ie6. Maybe a 2 second delay for the images to load. What browser are they using ?

 

Ie 6 like you, but they think it unreasonable that they can see a page of text before the style sheet kicks in.
I am pretty much self taught when it comes to style sheets so I don't know if I have done it well or not. Or even if this is acceptable. They say that they have never seen it on any other sites. Running out of answers now!

 

LOL, I have seen much worse on websites. Lots of sites with heavy javascript/css are jumpy. Yahoo mail, when it loads, the entire page shifts up and over about 5px due to a massive font resize at the end of the page loading. Not that yahoo's the bee's knees when it comes to web design but still.

Your stylesheet is kinda large for the layout. Maybe you should consolidate some of the declarations.

Don't know if it will help with this page, but take this:

border-bottom-color: #CCCCCC;
border-bottom-style: dotted;
border-bottom-width: 2px;

Shorthand is border : #cccccc dotted 2px;

And clump these together and declare only what is different,

#imagediv4 {
height: 230px;
width: 564px;
background-image: url(images/5.jpg);
background-repeat: no-repeat;
}
#imagediv5 {
height: 230px;
width: 564px;
background-image: url(images/2.jpg);
background-repeat: no-repeat;
}

like so:

#imagediv4 ,#imagediv5 {

height: 230px;
width: 564px;
background-image: url(images/5.jpg);
background-repeat: no-repeat;
}

#imagediv5 {
background-image: url(images/2.jpg);
}

...

Use the cascade to reduce typing on your part and hopefully it will reduce the time to render the page.

 

Thanks for the tips, I wondered if that might be the case! Also a few people have mentioned the @import thing is not so good, and also the size of the images. So I have quite a lot of work to do I think!
Thanks for looking into it for me.
Much appreciated.

 

Yeah, seems to work fine on FF for me, but I saw the jump on ie6. As you said, try sticking the style sheet in with a:

<link href="impact.css" rel="stylesheet" type="text/css" />

and seeing if it helps.

 

Will do - Thanks.

I will be coming back here again - it's been one of the most productive evenings I have had in a long time!

: )