Question

I have some div layers on my site that move to the wrong position when you navigate to the page (almost like the margins are being ignored?) this happens in most browsers i.e. Safari, FF, Chrome etc. Does anyone know why this would happen? Interestingly, the site seems OK locally and only seems to play up once I’ve uploaded it!! I’d appreciate any help/advice anyone can offer….

CSS:

#page-wrap-padding { 
width: 1078px; 
height: 700px;
margin: 0px auto 0px; 
background-color: transparent; 
}

#page-wrap { 
width: 978px; 
height: 610px;
margin: 35px auto 0px; 
background: #dc000f; 
overflow: hidden;
z-index:1000;
}

#guts{
margin: -15px;
overflow: hidden;
z-index: 2000;
}

#index-innards2{
position: absolute;
background: #dc000f; 
margin: 0px 0px 0px 600px; 
width: 378px; 
height: 550px; 
}

#index-innards{
position: absolute;
margin: 104px 0px 0px 230px; 
width: 340px; 
height: 390px; 
}

HTML

<div id="page-wrap-padding">
   <div id="page-wrap">
      <div id="guts">
         <div id="index-innards2">
         Content here
         </div>
            <div id="index-innards">
            More content here
            </div>
      </div>
   </div>
</div>

Answer 1

I made a jsFiddle here: http://jsfiddle.net/FPRFJ/

Is it possible you are experiencing the default margins supplied by browsers?

Try adding this:

body
{
margin: 0;
padding: 0;
}