Saludos: Me sigue sin funcionar y sin verse bien en IE... En Firefox y en Safari (MAC) se ve perfectamente, tal y como deberia verse, pero en Internet Explorer no. La he subido al servidor aver si así podeis localizar el problema mejor y ayudarme. La web esta subida aquí: http://www.reciclasiempre.com/PRUEBAS Solo funcionan el Inicio y el Bolígrafo. Espero que encontremos una solución, porque sido probando y probando cosas y no encuentro la manera de arreglarlo. Muchas gracias por su tiempo.
> Date: Mon, 25 Feb 2008 15:47:31 -0400 > From: [EMAIL PROTECTED] > To: ovillo@lists.ovillo.org > Subject: Re: [Ovillo] Problemas 3 columnas con IE 6 > > Hola Angel, quizas el problema esta en como flotas las columnas, tienes > unos cuantos margenes negativos que te podrias evitar con flotar las > columnas en orden. > Talves podrias poner las columnas en primer orden de tu html y flotarlas > usando float left y right. creo que esta solucionado > > > ///////////////////////////////////////////////////// > > <!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" /> > <style type="text/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.xand IE6 */} > #right{ float:right; 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%; } > > > </style > </head> > <body> > <div id="header"> <!-- Comienza el HEADER--> > <h1>TITULO WEB</h1> > </div> <!-- Finaliza el HEADER--> > > <h2>Inicio</h2><br /> > <div id="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--> > > <!-- 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="footer"><!-- Comienza el FOOTER--> > <br /> > <p align="center" class="pie">Pie de página bla bla bla</p> > </div><!-- Finaliza el FOOTER--> > </body> > </html> > > > El día 25/02/08, Angel Miguel Cebrián <[EMAIL PROTECTED]> > escribió: > > > > Si Solange: > > El problema me lo da en las versiones anteriores a la 7. Sobre todo la 6, > > ya que quiero que la web sea visible correctamente casi en todos los > > navegadores y versiones... > > A ver si podeis decirme porque falla en esas versiones.... > > > > Muchas gracias > > > > > From: [EMAIL PROTECTED]> To: ovillo@lists.ovillo.org> Date: Mon, > > 25 Feb 2008 15:25:33 -0300> Subject: Re: [Ovillo] Problemas 3 columnas con > > IE 6> > Angel,> > Yo los veo igual en ambos browsers. Lo estoy viendo con > > Firefox 2.0.0.12 y> con IE 7.0. Quizas sea un problema de versiones...> > > > Slds,> > s> > -----Mensaje original-----> De: > > [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]> > > En nombre de Angel Miguel Cebrián> Enviado el: Lunes, 25 de Febrero de 2008 > > 14:06> Para: ovillo@lists.ovillo.org> Asunto: [Ovillo] Problemas 3 > > columnas con IE 6> > 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/> > > _______________________________________________> Lista de distribución > > Ovillo> Para escribir a la lista, envia un correo a > > Ovillo@lists.ovillo.org> Puedes modificar tus datos o desuscribirte en la > > siguiente dirección:> http://lists.ovillo.org/mailman/listinfo/ovillo> > > > _______________________________________________> Lista de distribución > > Ovillo> Para escribir a la lista, envia un correo a > > Ovillo@lists.ovillo.org> Puedes modificar tus datos o desuscribirte en la > > siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo > > > > _________________________________________________________________ > > La vida de los famosos al desnudo en MSN Entretenimiento > > http://entretenimiento.es.msn.com/ > > _______________________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > > > -- > Jonathan C. > [EMAIL PROTECTED] > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo _________________________________________________________________ MSN Video. http://video.msn.com/?mkt=es-es _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
