[Ovillo] Problemas 3 columnas con IE 6
Angel Miguel Cebrián
angel_miguel_cebrian en hotmail.com
Lun Feb 25 17:06:11 UTC 2008
Saludos a todos:
Aunque es la primera vez que escribo una pregunta, llevo mucho tiempo siguiendo la lista y aprendiendo de vosotros.
Ahora me encuentro diseñando mi primer portal en xhtml y css para el lugar donde trabajo. Son 3 columnas, y en IE no se ve nada parecido a Firefox.
Os pongo aquí el codigo del CSS y del XHTML y ya me decis de que se puede tratar.
Muchas gracias por su tiempo.
Style.css
-----------------------------------------------------------------
* {margin:0px; padding:0px;}
body{ background-color:#ffffff; font-size:16px; width:880px; margin:auto; padding:0;}
#header{ background-color:#FFFFFF; height:160px;}
#contenedor{ width:100%; float:left;}
#center { margin-left:210px; margin-right:190px;}
#left{ float:left; width:200px; margin-left:-100%; background-color:#CCFF33; min-height:450px; /* for modern browsers */ height:auto !important; /* for modern browsers */ height:450px; /* for IE5.x and IE6 */}
#right{ float:left; width:180px; margin-left:-180px; background-color:#CCFF33;}
#footer { clear:both; background-color:#CCFF33; height:100px;}
#menuv { border: 0px solid #ACCFE8; border-width: 0px 0px 0 0px; width: 180px; text-align: center; font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;}
#menuv ul, li { list-style-type: none;}
#menuv ul { margin: 0; padding: 0;}
#menuv li { border-bottom: 1px solid #CCFF22;}
#menuv a { text-decoration: none; color: #003366; background: #CCFF33; display: block; padding: 3px 3px; width: 180px;}
#menuv a:hover { background: #FF9900;}.pie { font-size: 90%; margin-top:15px; color: #000000;}
/** A partir de aquí de pruebas....**/
.cajas{background:#FFFFFF; width:200px; min-height: 200px;float:left;border:1px solid #000000;margin:2px 2px 2px 2px;font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;text-align:center;}.cajatitulo{font-size:10px; }
.color_a { background:#CCFF33; color:#000; font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-style:normal; font-variant:small-caps; text-align:center}
h2 { font-family:"Trebuchet MS"; color: #003366; background: #CCFF33; display: block; padding: 4px; margin: -4px;}
h3 { font-family:"Trebuchet MS"; font-size:16px; color: #003366; background: #CCFF33; display: block; padding: 3px 3px 4px 4px; margin: -4px; float:left;}
.parrafitos { font-family:"Trebuchet MS"; text-indent: 10px; padding: 3px; margin: 8px 0 0 0px; font-size:90%; } .parrafitos2 { font-family:"Trebuchet MS"; text-indent: 10px; padding: 3px; width:85%; margin: 8px 0 0 0px; font-size:90%; }
-----------------------------------------------
Index.html
------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Reciclasiempre.com ][ Productos ecológicos, medio ambiente y concienciación medioambiental ][</title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body><div id="header"> <!-- Comienza el HEADER--><h1>TITULO WEB</h1></div> <!-- Finaliza el HEADER-->
<h2>Inicio</h2><br /><div id="contenedor"><!-- Comienza el CONTENEDOR--><div id="center"><!-- Comienza el CENTER-->
<p class="parrafitos"> Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum </p> <p class="parrafitos"> Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum </p> <!-- C A J A 1 C A J A 1 C A J A 1 C A J A 1 --> <div class="cajas"> <div class="cajatitulo"> <p class="color_a">Titulo1</p> </div> <p class="parrafitos2">Lorem ipsum lorem ipsumLorem ipsum lorem ipsumLorem ipsum lorem ipsum.</p> </div> <!-- C A J A 2 C A J A 2 C A J A 2 C A J A 2 --> <div class="cajas"> <div class="cajatitulo"> <p class="color_a">Titulo2</p> </div> <p class="parrafitos2">Lorem ipsum lorem ipsumLorem ipsum lorem ipsumLorem ipsum lorem ipsum.</p> </div> </div><!-- Finaliza el CENTER--></div><!-- Finaliza el CONTENEDOR-->
<div id="left"> <!-- Comienza el LEFT--> <div id="menuv"> <!-- Comienza el MENUV--> <ul> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> </ul></div><!-- Finaliza el MENUV--></div><!-- Finaliza el LEFT-->
<div id="right"><!-- Comienza RIGHT --> <div align="center"> <p class="parrafitos"><strong>Galería de imágenes. </strong></p> <p class="parrafitos2"> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p> </div></div><!-- Finaliza el RIGHT-->
<div id="footer"><!-- Comienza el FOOTER--> <br /> <p align="center" class="pie">Pie de página bla bla bla</p> </div><!-- Finaliza el FOOTER--></body></html>
-------------------------------------------------
_________________________________________________________________
La vida de los famosos al desnudo en MSN Entretenimiento
http://entretenimiento.es.msn.com/
Más información sobre la lista de distribución Ovillo