...

View Full Version : Wrapper looks weird during load, fine after stuff inside loads



curb
05-12-2008, 12:04 AM
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)



<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:Arial, Helvetica, sans-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>

jcdevelopment
05-12-2008, 04:17 AM
It might be easier to view the problem physically. Do you have a link by any chance?

curb
05-12-2008, 06:23 AM
Sorry I don't. I'm testing this out locally.

jcdevelopment
05-12-2008, 03:55 PM
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?

curb
05-12-2008, 07:47 PM
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?

curb
05-13-2008, 04:26 PM
Putting the wrapper with float:left works but it would only lean the whole layout to the left

jhaycutexp
05-13-2008, 04:36 PM
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....

curb
05-13-2008, 05:40 PM
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/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum