No se ve en IE 6 ni Mozilla 2

valenti77 · #1 (**permalink**) 25/10/2009, 01:24

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

javi_freelance · #2 (**permalink**) 25/10/2009, 05:46

El IE 6 tiene bastantes bugs, pero después de tanto tiempo ya los conocemos casi todos.
Explicanos un poco que es lo que se te ve mal que seguro que ya nos ha pasado alguna vez.
Que es lo que se te ve mal, los márgenes/distancias?

luckystrikede11 · #3 (**permalink**) 25/10/2009, 10:55

tu estructura CSS esta mal hecha

puedes seguir como ejemplo algo asi

Código HTML:

body{
text-align:center;
}
#container{
width:750px;
margin:0 auto;
}
#contenido {
width:600px;
float:right;
}
#barra {
width:150px;
float:left;
}
#footer {
clear:both;
}

JavierB · #4 (**permalink**) 25/10/2009, 10:57

luckystrikede11, para contestar lo que contestabas antes de editar, da igual que no contestes nada.

Saludos,

luckystrikede11 · #5 (**permalink**) 25/10/2009, 11:02

Cita:

Iniciado por JavierB

luckystrikede11, para contestar eso da igual que no contestes nada.

Saludos,

lo mismo digo

valenti77 · #6 (**permalink**) 25/10/2009, 18:38

Ya se que esta todo desorganizado el CSS, pero no sabia que eso influía en la visualizacion. Es que cuando se me ocurren clases y estilos los agrego en cualquier lado, una vez que se ve bien, los acomodos jerarquicamente, asi que de ahora en mas lo voy a empezar al revez.

Lo que no se ve es: #contenido

Que dentro tiene a #barra,#cosas (ya por los nombres de mis divs se darán cuenta lo que es para mi maquetar a grandes rasgos).

En un momento se veia el contenido, pero cuando superaba el alto del monitor, se cortaba debido a la propiedad overflow:HIDENN de "background", pero al cambiar esta propiedad y poner el scroll, el margen superior de "contenido" desaparecia, y deslizaba hacia arriba.

El fondo de la pagina es una playa, y en la parte superior tiene un titulo que ocupa todo el ancho, lo que quiero es que "contenido" se mantenga fijo a una distancia de aprox 200px que es lo que tiene el titulo(de alto)(seria un margin-top:200px para "contenido"), se entiende?

Y ni les cuento cuando puse el footer, creo que de ahi en mas se dejo de ver en IE6, es que probe con tantos cambios que ya no recuerdo cual fue el causante jaja.

Saludos!

Pabloweb · #7 (**permalink**) 25/10/2009, 21:14

Que onda?!!! Pues yo les traigo una alternativa mejor y más rápida... MUDANZA A IE8!!

Pabloweb · #8 (**permalink**) 25/10/2009, 21:15

AH OTRRA COSA!!! para continuar con esta alternativaaa les dejo este link para hacerlo más rápido... www(punto)adiosie6(punto)com

alexk · #9 (**permalink**) 25/10/2009, 23:29

Pabloweb ya van 3 post de eso jeje.. suerte con cambiar al mundo tu puedes

luckystrikede11

Cita:

tu estructura CSS esta mal hecha

Cita:

body{
text-align:center;
}

valenti77

Cita:

Ya se que esta todo desorganizado el CSS, pero no sabia que eso influía en la visualizacion

pues no... amenos que herede estilos, pero siempre coge el ultimo valor asignado.

seria mejor que nos des la URL del problema, ya que entendi poco...

valenti77 · #10 (**permalink**) 25/10/2009, 23:54

http://www.chubicum.com.ar/Niandrejo/indexmalo.html

Y tmb apoyo a Pablo con su idea de cambiar al mundo, jajaja, es fácil decirlo, pero los que hacemos web supongo que tenemos que lograr que una pagina se vea completamente igual o con las minimas diferencias posibles entre los distintos navegadores mas usados hoy en día.

Mucha gente continua usando el IE6 porque no le molesta cambiarlo, y por ahí ni siquiera está informada sobre todo lo referente a motores de renderizacion y estándares web.