Hola gente, esta es la primera vez que trabajo con un fondo grande y posiciones fixed, y me estoy sacando la cabeza porque no logro que en IE 6 se vea bien:
Estos son los estilos que tengo:
Código:
/*Partes
------------------------------------------------*/
#contenido {
width:750px;
z-index:5;
position:fixed;
top:30%;
left:15%;
overflow:auto;
}
#barra {
float:left;
width:200px;
padding:0;
}
#footer {
width:100%;
z-index:5;
position:fixed;
bottom:0%;
left:0;
background:none;
height:50px;
text-align:center;
border-top:1px dashed gray;
}
#footer a{
font:14pt Verdana;
color:Green;
Text-decoration:blink;
}
#cosas {
background:none;
color:#FFF;
text-align:center;
height:350px;
overflow:auto;
}
html, body {
margin:0; padding:0; width:100%; height:100%; overflow:hidden; font: 12pt Tahoma;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{
position:absolute;
z-index:1;
width:100%;
height:100%;
top:0;
}
#scroller {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:auto;
z-index:2;
}
#content {width:100%; height:100%; overflow:auto;}
#fixed {
position:absolute;
top:25px;
left:10px;
width:150px;
z-index:10;
color:#567;
border:1px solid #000;
padding:10px;
}
/*Menu
------------------------------------------------*/
.menu{margin:0; padding:0; width:200px; list-style:none;background:none;}
.menu li{padding:5px; margin:0 0 5px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Tahoma; font-weight:bold; color:#ff7700; display:block; background:none; 0px 0px no-repeat; text-decoration:none;}
Y esta es la organización:
Código HTML:
<BODY BGCOLOR=#FFFFFF>
<img src="Images/niandrejo.jpg" alt="+++Viví Ñandrejo+++" title="+++Viví Ñandrejo+++" id="background">
<div id="content">
<div id="contenido">
<div id="barra">
<ul class="menu">
<li class="crea"><a href="javascript:llamarasincrono('creadores.htm', 'cosas');"></a></li>
<li class="lug"><a href="javascript:llamarasincrono('lugar.htm', 'cosas');"></a></li>
<li class="beb"><a href="javascript:llamarasincrono('bebidas.htm', 'cosas');"></a></li></ul></div>
<div id="cosas"><div id="aviso"><h1>¿Te la Vas a Perder?</h1></div></div></div>
</div>
<div id="footer"><table border="0" width="100%">
<tr><td><a href="reserva.html">Reservá tu entrada</a></td><td><a href="reserva.html">Reservá tu entrada</a></td></tr><
/div>
</BODY> Agradeceria mucho si me pudieran ayudar!
PD:En firefox 3 la pagina se ve perfectamente