Download & Extend

White Background delayed on load fix.

Project:Marinelli
Version:6.x-2.96
Component:Code
Category:bug report
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

On page load the white background can be delayed, causing the page text to show briefly on the blue background until the page fully loads. A fix for this is to use the "Clearfix" css trick below. I'll roll a patch when I get back home.

There's two elements to this fix, the CSS, and the class call in page.tpl.php.

First add the CSS class "clearfix" to the #page div. (approx line #51 of page.tpl.php)

<div id="page" class="clearfix">

Then add the following CSS to the bottom of the layout.css:

/* clearfix magic */

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

This will cause the #page div to extend to the end of the page content without needing to wait for the page to completely load.

Comments

#1

hyrcan, any update on this? Thanks!

#2

Version:6.x-2.9» 6.x-2.96

I'm having this same issue with the page text loading before the white background, and so it is showing on the dark background image for a few moments on some slower page loads. I have tried the fix shown in the original post but it didn't solve the problem here. I'm using version 6.x-2.96

If I could just delay the page text load until after the white background loads, it would be fine. But the few moments of dark text on a dark background do not look good and may force a change in themes to something else. Any advice on fixing this issue would be appreciated.

nobody click here