Hola Miguel Angel,
Te diría que hay un problema de interpretación de tamaños (anchuras de
los div) que es típica de IE. El mejor truco que conozco para que no
ocurra es calcular todo de modo que la anchura total se quede en un 98%
(usando medidas proporcionales) o un poco por debajo de la anchura
máxima que quieres lograr (además de haber controlado los margin y
padding desde el elemento raíz para que sea igual en todos los
navegadores).
De todos modos veo algunos contenedores redundantes en el código (no
entiendo porqué la imagen de la cabecera tiene que estar contenida en
dos div), que podrían eliminarse, y a su vez echo de menos un contenedor
para todo lo que va entre la cabecera y el pie de página.
Mi esqueleto para esa página sería:
<div id="cabecera">La imagen y lo que creas necesario</div>
<div id="pral">
<div id="menu1">menu de la derecha</div>
<div id="contenido">contenido central</div>
<div id="destacados">columna de la izquierda</div>
</div>
<div id="pie">El pie de página</div>
De este modo definiría la anchura de los contenedores *menu1*,
*contenido* y *destacados* en porcentajes (sobre la anchura de *pral*
puesto que están dentro de éste), más o menos dándoles 20%, 60% y 18%.
De este modo no se te solaparían ni siquiera en IE.
De todos modos, el tema de maquetación a 3 columnas está muy documentado
y en la propia lista se ha hablado repetidamente de ello.
Un saludo
Victoria
El mar, 26-02-2008 a las 17:35 +0100, Angel Miguel Cebrián escribió:
> 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
_______________________________________________
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
