Pagina para IE 6 sin problemas

Marcos071 · #1 (**permalink**) 14/03/2008, 15:32

Hola, trabajando en el diseño de sitios con tablas tediosas me he dedicado a investigar por la web y me he dado cuenta del uso de css, NO MAS TABLAS!!!
Desarrollando una web en este momento me he dado cuenta de que IE 6 es un problema para los css, ya que admite opciones de li y ul, los he comprobado tratando de hacer un multimenu y como no se JS no pude hacer funcionar en IE 6. Ahora me encontre con un problema tambien con imagenes, márgenes y paddings y no puedo solucionar esto en IE 6, he buscado y probado pero no...no hay caso para mi.
Pueden darme una mano? Please!!
Gracias.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RealState Argentina</title>
<style>

body{
		background-color:#006699;
		font:Georgia, "Times New Roman", Times, serif;
		font-size:16px;
}
#cabecera{
		width:950px;
		height:159px;
		background-image:url(img/cabecera.jpg);
		background-repeat:no-repeat;
		margin:auto;
		padding:0;
}
#botonera{
		width:950px;
		height:51px;
		margin:auto;
		padding:0;
}
#boton1{
		width:245px;
		height:51px;
		background-image:url(img/inicio1.jpg);
		background-repeat:no-repeat;
		margin:0;
		float:left;
		padding:0;
}
#boton2{
		width:221px;
		height:51px;
		background-image:url(img/propiedades1.jpg);
		background-repeat:no-repeat;
		margin:auto 245px;
		padding:0;
}
#boton3{
		width:137px;
		height:51px;
		background-image:url(img/arquitectura1.jpg);
		background-repeat:no-repeat;
		margin:-51px 466px;
}
#boton4{
		width:130px;
		height:51px;
		background-image:url(img/trasaciones1.jpg);
		background-repeat:no-repeat;
		margin:-51px 603px;
}
#boton5{
		width:217px;
		height:51px;
		background-image:url(img/contacto1.jpg);
		background-repeat:no-repeat;
		margin:-51px 733px;
}
#contenedor{
		width:950px;
		margin:auto;
}	
#cuerpo{
		width:950px;
		height:200px;;
		background-image:url(img/cuerpo.jpg);
		background-repeat:repeat;
		margin:auto;
}
#pie{
		width:950px;
		height:302px;;
		background-image:url(img/pie.jpg);
		background-repeat:repeat;
		margin:auto;
}
</style>


</head>

<body>
   <div id="contenedor">  
   <div id="cabecera"></div>

           <div id="botonera">
              
               <div id="boton1"></div>
               <div id="boton2"></div>	
               <div id="boton3"></div>	
               <div id="boton4"></div>	
               <div id="boton5"></div>	
                        
           </div>      

  	</div>
</body>
</html>

Aqui dejo la imágen de cómo se ve el boton PROPIEDADES en IE6, que no comprendo a qué se debe ese espacio vacío...

[img=http://img444.imageshack.us/img444/5564/sinttulo1vn7.th.jpg]

Marcos071 · #2 (**permalink**) 14/03/2008, 16:04

He estado pensando y podria hacer que cuando el navegador sea IE6 ponga una tabla en los botones...pero no se como hacerlo...

Marcos071 · #3 (**permalink**) 14/03/2008, 17:20

Alguien me podria dar una mano con este problema...por favor!!!

Mikmoro · #4 (**permalink**) 14/03/2008, 17:29

No estoy seguro de cómo va a quedar, porque las imagenes no están disponibles, pero haciendo una limpieza de tu css, que tenía bastante porquería, y añadiendo alguna cosa (como float: left; a todos los botones), yo creo que te servirá y se arreglará el problema. Si no es así ya dirás y veremos qué se puede hacer.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RealState Argentina</title>
<style>
* {
padding: 0px;
}
body{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
}
#cabecera{
width:950px;
height:159px;
background:url(img/cabecera.jpg)no-repeat;
}
#botonera{
height:51px;
}
#boton1, #boton2, #boton3, #boton4, #boton5 {
height:51px;
float:left;
}
#boton1{
width:245px;
background:url(img/inicio1.jpg)no-repeat;
}
#boton2{
width:221px;
background:url(img/propiedades1.jpg)no-repeat;
}
#boton3{
width:137px;
background:url(img/arquitectura1.jpg)no-repeat;
}
#boton4{
width:130px;
background:url(img/trasaciones1.jpg)no-repeat;
}
#boton5{
width:217px;
background:url(img/contacto1.jpg)no-repeat;
}
#contenedor{
width:950px;
margin: 0px auto;
}
#cuerpo{
width:950px;
height:200px;;
background-image:url(img/cuerpo.jpg);
background-repeat:repeat;
}
#pie{
width:950px;
height:302px;;
background-image:url(img/pie.jpg);
background-repeat:repeat;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div id="botonera">
<div id="boton1"></div>
<div id="boton2"></div>
<div id="boton3"></div>
<div id="boton4"></div>
<div id="boton5"></div>
</div>
</div>
</body>
</html>

Mikel.

Marcos071 · #5 (**permalink**) 14/03/2008, 19:05

Pues nada amigo...ya me estoy volviendo loko con esto del IE 6... ahora en firefox como estaba nomas, anda bien...pero IE 6 nada, ni siquiera muestra nada...ninguna imagen...

Pues la verdad no lo se...queria hacerla a la pag con divs pero no me sale, parece que lamentablemente tendre que volver a las tablas ya que bastante he dedicado a este css y no lo puedo hacer funcionar normalmente en IE 6... que BRONCA!!!!

Mikmoro · #6 (**permalink**) 14/03/2008, 19:13

Ah, vaya vaya, lo siento: he encontrado un fallo. Copia y pega este código y prueba una vez más, hombre de poca fe

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RealState Argentina</title>
<style>
* {
padding: 0px;
}
body{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
}
#cabecera{
width:950px;
height:159px;
background:url(img/cabecera.jpg) no-repeat;
}
#botonera{
height:51px;
}
#boton1, #boton2, #boton3, #boton4, #boton5 {
height:51px;
float:left;
}
#boton1{
width:245px;
background:url(img/inicio1.jpg) no-repeat;
}
#boton2{
width:221px;
background:url(img/propiedades1.jpg) no-repeat;
}
#boton3{
width:137px;
background:url(img/arquitectura1.jpg) no-repeat;
}
#boton4{
width:130px;
background:url(img/trasaciones1.jpg) no-repeat;
}
#boton5{
width:217px;
background:url(img/contacto1.jpg) no-repeat;
}
#contenedor{
width:950px;
margin: 0px auto;
}
#cuerpo{
width:950px;
height:200px;;
background-image:url(img/cuerpo.jpg);
background-repeat:repeat;
}
#pie{
width:950px;
height:302px;;
background-image:url(img/pie.jpg);
background-repeat:repeat;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div id="botonera">
<div id="boton1"></div>
<div id="boton2"></div>
<div id="boton3"></div>
<div id="boton4"></div>
<div id="boton5"></div>
</div>
</div>
</body>
</html>

A ver qué pasa ahora.

Mikel.

Marcos071 · #7 (**permalink**) 14/03/2008, 19:22

Gracias Mikmoro, te debo una...y tambien por lo que me has dicho "hombre de poca fe"...

Pues eran solo los no-repeat...

Thanks!!!