Baffling - CSS works fine after refresh but not before?

[exwhyz]

I have a dynamic page that get rendered perfectly on IE, Firefox and Netscape. However on Firefox and Netscape the first load of the page garbles the layout inside one table where there is lot of formatting going on. When I hit refresh the page displays properly. I am completely baffled at this. Did anybody face something similar?

Thanks.

 

[BillyRayPreachersSon]

I've seen this in Netscape before - but it was a long time ago in v4. Can you post a URL?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

I would expect to see this if there was a problem serving the CSS (so you end up with unstyled content for a while) or if the HTML page doesn't validate.

Does your page have a doctype? Does it validate against it (

http://validator.w3.org)?

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[exwhyz]

I wonder if this has anything to do with server response times, when I was testing locally the response was relatively slow but I never once saw the display getting screwed up. As soon as I moved it to the production machines the response is great but in Firefox and Netscape I have to do a subsequent request. I am sorry I cannot post the link because it is not public.

 

[exwhyz]

I have used firefox validator plugin and there are no errors reported only a few warnings.

The problem is not that the CSS is not getting applied at the time of rendering, it is getting applied but multiple cells that are in div blocks with float set to left (for horizontal display) seem to work fine only after refresh. Prior to the refresh some of them display side by side as expected but others display below the other.

So insted of displaying like this:

box1 box2 box3 box4 box5 box6 box7

they are displaying like this

box1 box2
box3 box4 box5
box6 box7

 

[Foamcow]

sounds like a page width calculation issue.

Browser 1 calculates the page width with all your styles etc applied.
Browser 2 caluculates the width before the styles load.

Either that or a response time issue - could it be that you are still requesting the CSS files from your local server instead of your production server?

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[exwhyz]

I suspect it is a border width calculation issue from the looks of it, any pointers in this direction?

 

[exwhyz]

I believe this has been resolved for now. I did this by explicitly specifying the width of the body tag in the CSS.

Thanks Foamcow!