SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container wrapper does not clear floats until child elements have loaded

    On this page > http://mattbike.com/about-cassettes/4

    When you hit it the first time (or do a force refresh for uncached content after the initial page load), the white container that surrounds the page (div class="wrapper") is not fully clearing the floated elements that it contains until all items on the page have loaded.

    This results in, as you can probably see, a temporary stage in which the background of the contained elements is inherited from the body (the gray color).

    What are my options for a CSS workaround to prevent this issue?

  2. #2
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,276
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    I'm going to wager a guess that it's because the clearing DIV is one of the last child elements. The browser won't process it until everything above it has been processed first. Try using the clearfix trick instead.
    "First make it work. Then make it better."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What Jeff said above sounds feasible so is worth a try.

    There may also be an issue in #wrapper where you have used a linear gradient for the background and gradients are notoriously slow to render (especially in Firefox) which is the reason I avoid using them and use images instead as I find them quicker and lighter on page usage than gradients.

    However, you could try supplying a background-color of #fff on #wrapper before the linear gradient rule so that at least you have a white background while firefox creates the linear background image (which it effectively is).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •