After viewing this site’s redesign in progress, Peter Petrus wrote:
[Y]ou’re using footer to clear floats (content + sidebar). This creates a large drawback, because before footer is downloaded and displayed in the browser, parent wrapper lacks any background.
It means that we’re staring on black text / orange background combo for a few moments. Well, few moments now, but should you put any unresponsive widgets in the sidebar, everything can render much slower. Having main content flash like this isn’t very pleasant – especially when you named the redesign “Designing from the content out”.
Solution is very simple – use ‘:after’ clearing for the main wrapper. Sure, it won’t work on IE, but 1) setting width to wrapper sets hasLayout and triggers clearing 2) #footer is still there, in any case.
I’d read about using “:after” clearing but hadn’t implemented it and thought I could solve the problem an easier way. This afternoon, with about five minutes’ work, I did so.
I solved the orange background flash by moving the faux column background image up in the CSS hierarchy.
- In the original CSS, I used the faux column background image on the
wrapperelement only. - In the updated CSS, I’ve now added the same background image to the
bodyelement as well.
Doing so fixed the orange background flash problem, because the browser no longer has to wait for the footer to clear before showing the background image.
Compare body element on new z.css and previous z-bak.css. (Likewise, compare body on alt.css and alt-bak.css.)
[tags]css, workarounds, clear, float[/tags]