Estoy haciendo un diseño que tengo definido en CSS como:
Código HTML:
#masthead{
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
width:100%;
height:110px;
background-color:#ffffff;
background-image: url('imagenes/kvbgtop.gif');
background-repeat: no-repeat;
background-position: right;
border-bottom: 1px solid #ccd2d2;
visibility: visible;
}
#pageNav{
position:fixed;
z-index: 1;
left: 0px;
top: 110px;
width:150px;
padding: 0px;
visibility: visible;
}
#content{
position:relative;
z-index: 0;
min-height: 350px;
margin-top:110px;
margin-left:150px;
padding: 10px;
border-left: 1px solid #ccd2d2;
text-align: justify;
background-color: #FFFFFF;
font: 90% Arial,sans-serif;
}
/************** siteInfo styles ****************/
#kafooter{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #000000;
padding: 5px 0px 0px 0px;
margin-top: 0px;
background-image: url('http://localhost/kafooterc.php');
}
Y los inserto en la pagina así
Código HTML:
<body>
<div id="masthead">
.......
</div>
<div id="pageNav">
.......
</div>
<div id="content">
.......
</div>
<div id="kafooter">
.......
</div>
</body>
ahora bien.... la intención es que 'masthead' y 'pageNav' permanezcan "fijas" , en el caso de 'content' se abra en relación a las lineas que lance en código dentro de dicho <div> y 'kafooter' viene pegado de último
El asunto es que
Ejecutándolo desde el mismo servidor en Mozilla Firefox y con Konqueror funciona de maravilla ( servidor linux )..... pero... desde un computador en la red con IE "TODO SE MUEVE" , es decir, al desplazarse por el scroll se mueve todo como si estuviera en un solo <div> y por otro lado el <div> 'content' lo coloca 150px despues de que termina el <div> 'pageNav'
H E L P !!!!
QUE HAGO ?
Saludos y Gracias.
Frank