White content on a grey background 1

Mike Lewis · Jul 22, 2010

I want to create a simple page that has all of its content in a fixed-width container, with a white background, centred horizontally in the window. The surrounding area is to have a grey background.

I have done the following:

Code:

html
{ background: lightgrey; }

body
{ width: 970px; background: white; margin 0 auto; }

This achieves exactly the effect I want.

The only problem is that, when the page loads, the entire browser window shows grey for a second or so, before the rest of the content appears, giving a slightly disconcerting flashing effect.

Obviously, this is not a big problem, but I was wondering if anyone can suggest a simple way of avoiding it.

Thanks.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

JoeAtRevolutionUnltd · Jul 22, 2010

Are you loading large images or other large files? What speed is your connection?

Joe Brown
Web Designer & Developer

http://www.revolutionunlimited.com

Mike Lewis · Jul 22, 2010

Joe,

I'm testing this with a small page, with only one small image, on my local development system.

I'd guess it's taking about 500 to 800 ms for the page to load. Not particularly slow, but long enough to give the flashing effect I described.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

BigRed1212 · Jul 22, 2010

Flash of Unstyled Content?

http://www.bluerobot.com/web/css/fouc.asp/

Probably not it.

vacunita · Jul 22, 2010

The body element of a page is by default as big as the view port and white. Which means that when your page loads it takes a split second for the browser to adjust it to the width and heigt. Hence the flash.

For that reason, the body element should not be manipulated like that. It should be left only for main backgrounds and general page stylings, that don't affect its size.

If you want to add a container, then use a div. that's what they are for, and call it content or something descriptive.

Code:

body
{ background: lightgrey; }

#content
{ width: 970px; background: white; margin 0 auto; }
...

<body>
<div id="content">
</div>
</body>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Mike Lewis · Jul 22, 2010

Vacunita,

Thanks for the reply. So, what you are saying is that I need an outer div that holds all the other divs on the page. I can see the reason for that.

OK, I've just tried that. It works OK - that is, the page is styled the way I want it - but I'm still seeing the flashing.

I guess the reason is obvious. In both my original version and your suggested version, the lightgrey is going to load before the white. I guess there's no way of avoiding that.

It's not a big problem. It's just that I've seen many pages on the web that have this same type of styling, and I can't remember seeing the behaviour I've described. That led me to believe I was doing something wrong.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

Mike Lewis · Jul 22, 2010

BigRed,

Thanks for the reference. But, as you thought, it's not really relevant to my problem. But I'll read it anyway.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

vacunita · Jul 22, 2010

So which browser are you seeing this on?
Is your CSS in the same page or are you lading an external stylesheet?
I'm using IE8 and FF and no flash is there using a div.
Only when styling the body element do I get a flash.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Mike Lewis · Jul 22, 2010

Vacunita,

I've tested this with IE6, IE8 and FF3. Same behaviour with all three.

The CSS is in a separate file.

I've just uploaded a couple of examples to the site.

This one is my original page:

http://www.veg-world.com/underprep/abernethy.htm

And this one is the version after I did what you suggested:

http://www.veg-world.com/underprep/abernethy-1.htm

As you can see, I used a class rather than an ID for the DIV (not sure why), but I don't suppose that would make any difference.

Thanks for your on-going help.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

vacunita · Jul 22, 2010

Loaded your examples, and I got no flash. I get the gray background, and immediately the content loads, no white flash at any moment.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Mike Lewis · Jul 22, 2010

I think we're seeing the same thing. First, the whole page is grey. Then, after a few hundred ms, the while block appears.

Perhaps "flashing" is the wrong word. The effect I'd like to avoid is the grey that appears for an instant and is then largely replaced by white.

Sorry if I didn't explain it well the first time.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

vacunita · Jul 22, 2010

Might be the ads at the top and left, that slow down the loading of the page.

I see no other reason for the slight delay in loading the content.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

johnwm · Jul 22, 2010

The 'Page speed' add-on for Firefox is very useful for finding this sort of problem.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

Mike Lewis · Jul 23, 2010

Vacunita,

You're right about the ads. When I remove them, the page loads instantly. I'm still seeing the whole window turning grey for a moment before the content appears, but it's for a much shorter period now.

I can't do the site without the ads, so I'm going to have to live with the very slightly annoying visual effect.

My main reason for starting this thread was in case I was missing something obvious, which doesn't seem to be the case.

Thanks for taking the time to look at my pages - and especially for your suggestion of not adding styling to the HTML tag. It seems obvious now. I don't know why I did it. Must have been something I read somewhere.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

Mike Lewis · Jul 23, 2010

John,

I'll take a look at PageSpeed. Thanks.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

vacunita · Jul 23, 2010

Sorry I couldn't be of more help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

ca8msm · Jul 26, 2010

How about loading the adverts with javascript once the page has loaded? Would that be an acceptable compromise?

Mark,

Darlington Web Design[tab]|[tab]Experts, Information, Ideas & Knowledge[tab]|[tab]ASP.NET Tips & Tricks

Mike Lewis · Jul 27, 2010

Mark,

How about loading the adverts with javascript once the page has loaded?

Not sure I understand the reason for that. As I understand it, the problem isn't caused by any slowness in the page load. It's caused by the fact that the grey background of the entire page is rendered first, and then most of that is immediately overwritten with the white of the central block of content.

Even if I remove the adverts, I still see the same effect.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

White content on a grey background 1

Programmer

Programmer

Programmer

Technical User

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor