I have a css design up at
Jacksons Home and Garden "Mastering the Art of Living Well"
The problem that I am having is that when the page is being renedered it draws the layers and then when it is done loading it moves them to the center where they are supposed to be.
How can I get it to render where it is supposed to be and not jump?
I am using the pVII for dreamweaver to position it.
Here is a clip of the css.
<style>
input, form { font-size:9px; }
</style>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:107px;
top:21px;
width:790px;
height:518px;
z-index:1;
background-color: #FFFFFF;
overflow: auto;
}
#Layer2 {
position:absolute;
left:117px;
top:33px;
width:768px;
height:494px;
z-index:2;
}
#Layer3 {
position:absolute;
left:118px;
top:34px;
width:768px;
height:75px;
z-index:3;
background-image: url(../grillstore/css/images/headerback.jpg);
overflow: visible;
}
#Layer4 {
position:absolute;
left:118px;
top:110px;
width:768px;
height:40px;
z-index:4;
background-color: #CDD7B7;
}
#Layer5 {
position:absolute;
left:752px;
top:110px;
width:134px;
height:40px;
z-index:5;
background-color: #89A358;
}
#Layer6 {
position:absolute;
left:118px;
top:151px;
width:768px;
height:379px;
z-index:6;
}
#Layer7 {
position:absolute;
left:117px;
top:110px;
width:768px;
height:40px;
z-index:7;
overflow: auto;
}
#Layer8 {
position:absolute;
left:117px;
top:110px;
width:768px;
height:40px;
z-index:7;
}
body {
background-color: #CDD7B7;
text-align:center;
}
#layout { margin-left:auto; margin-right:auto; }
#Layer9 {
position:absolute;
left:650px;
top:37px;
width:235px;
height:23px;
z-index:7;
}
#Layer10 {
position:absolute;
left:688px;
top:74px;
width:172px;
height:22px;
z-index:8;
}
#Layer11 {
position:absolute;
left:704px;
top:110px;
width:150px;
height:40px;
z-index:9;
background-image: url(../grillstore/css/images/headerback.jpg);
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #333333;
}
.style2 {color: #666666}
#Layer12 {
position:absolute;
left:103px;
top:547px;
width:794px;
height:80px;
z-index:10;
}
.style6 {
font-size: 9px;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style9 {font-size: 10px; color: #DAE2CD; font-family: Verdana, Arial, Helvetica, sans-serif;}
.style12 {font-size: 9px; color: #89A358; font-family: Verdana, Arial, Helvetica, sans-serif;}
-->
</style>