Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wrapper looks weird during load, fine after stuff inside loads

    I noticed that my layout loads weird when I have my javascript banner script loaded on one of the side column. The wrapper doesn't stick with the other divs in it.

    I used float:left on my wrapper and it helps but the problem with that is the whole layout leans towards the left.

    Here's the sample code:
    (ignore the banner size, the javascript helps illustrate what happens to the wrapper when loading)


    PHP Code:
    <style type="text/css">
    * {
    margin:0;
    padding:0
    }
    /*create scroller*/
    html {overflow-y:scroll}
    body {
    background-position:bottom;
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-color:#E5E5CC;
    font-family:ArialHelveticasans-serif;
    font-size:13px;
    }

    #wrapper {
    width:922px;
    background-color:#333A46;
    border-bottom:10px solid #FFF;
    border-left:10px solid #FFF;
    border-right:10px solid #FFF;
    margin:0 auto;
    padding:5px
    }

    #header {
    color:#333;
    width:900px;
    float:left;
    border:1px solid #151515;
    background:#222;
    margin:0 0 5px;
    padding:10px
    }

    #navigation {
    float:left;
    width:900px;
    color:#333;
    border:1px solid #F2F2F2;
    background:#FFF;
    margin:0 0 5px;
    padding:10px
    }

    #leftcolumn {
    color:#333;
    xborder:1px solid #202B31;
    background:#333A46;
    xheight:350px;
    width:127px;
    float:left;
    margin:0 5px 5px 0;
    padding:0
    }

    #content {
    float:left;
    color:#333;
    border:1px solid #202B31;
    background:#202B31;
    xheight:350px;
    width:481px;
    display:inline;
    margin:0 5px 5px 0;
    padding:0
    }

    #rightcolumn {
    color:#333;
    xborder:1px solid #202B31;
    background:#333A46;
    xheight:350px;
    width:302px;
    float:left;
    margin:0 0 5px;
    padding:0
    }

    #footer {
    width:900px;
    clear:both;
    color:#333;
    border:1px solid #2F2F2F;
    background:#2F2F2F;
    margin:0 0 5px;
    padding:10px
    }

    </
    style>
    <
    div id="wrapper">
      <
    div id="header"> </div>
      <
    div id="navigation"navigation </div>
      <
    div id="leftcolumn">
        <
    script type="text/javascript" src="http://demo.adpeeps.com/adpeeps.php?bfunction=showad&amp;uid=100000&amp;bmode=off&amp;gpos=center&amp;bzone=left_box_1&amp;bsize=728x350&amp;btype=3&amp;bpos=default&amp;ver=2.0&amp;btotal=1&amp;btarget=_blank&amp;bborder=0"></script>
      </div>
      <div id="content"> content here </div>
      <div id="rightcolumn"> right </div>
      <div id="footer"> footer </div>
    </div> 

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    It might be easier to view the problem physically. Do you have a link by any chance?

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I don't. I'm testing this out locally.

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    no offense, but does it relly matter how it looks when it loads. CSS loads the properties as it goes and sometimes images wont appear until fully loaded and it can look wierd. Is it affecting it ost load though?

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It looks really weird when it's in the process of loading all the content. The divs inside the wrapper gets loaded with the body bg, then that bgfinally gets covered by the wrapper bg.

    ost?

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Putting the wrapper with float:left works but it would only lean the whole layout to the left

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    Are there images by any chance???

    If there is... try to make them as optimized as possible.. this i think will solve youre problem in loading.. I experienced this once.. but i tried methods of optimizing the images in my page and it worked dilly dolly fine...

    Or, your host has bandwidth problems....

  • #8
    New Coder
    Join Date
    May 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've tested it with the images only and it's fine. It's the dynamic javascript banner code on the example that creates that little layout lag.

    Here's a sample url: http://curb.bravehost.com/
    Last edited by curb; 05-13-2008 at 05:50 PM.


  •  

    Posting Permissions

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