Problema de Diseño en IE (6, 5.5, 5)

[iamarock]

Hola a todos:

Estoy usando un theme en mi pagina gestionada con Wordpress y hace unos días me di cuenta de que el diseño casca en versiones de Internet Explorer inferiores a la 7. El problema es que, en estos navegadores, la columna de la derecha desaparece de su posición para aparecer una vez finalizado el contenido de la columna central.

Para verlo mejor, mi sitio es: http://www.computer-age.net

Revisando la hoja de estilos he pensado que quizás hay que ajustar los widths de los distintos elementos o incluso redimensionar las imágenes bajo los encabezados de la columna derecha, pero como ahora mismo no dispongo de un entorno local para hacer pruebas no se muy bien por donde empezar.

Esta es la hoja de estilos del theme:

Código:

/*  
Theme Name: Finestripes
Theme URI: http://www.seo-themes.com/
Description: Two colums theme decorated with stripes presented by <a href="http://www.seo-themes.com/" title="Seo Themes">Seo Themes</a>.
Version: 1.0
Author: Georgio
Author URI: http://www.seo-themes.com/
Latest updated: March 24th, 2007
*/


/* ----------------------- Base -------------------- */

html {
 height: 100%;
 zoom: 1.0;
}

body {
 background: black;
 color: black;
 margin: 0; padding: 20px 0 20px 0;
 font-family: Arial, Helvetica, sans-serif;
 text-align: center; /* IE hack Part 1 */ 
}

#container {
 width: 800px;
 margin: 0 auto 0 auto; padding: 0;
 background: url('images/bg.png') repeat-y top left;
}

#top {
 width: 800px;
 height: 50px;
 margin: 0; padding: 0;
 background: url('images/top.png') no-repeat top left;
}

#left {
 width: 594px;
 margin: 0; padding: 0;
 float: left;
 background-color: white;
}

#header {
 width: 594px;
 height: 88px;
 margin: 0; padding: 0;
}

#headerphoto {
 width: 594px;
 height: 165px;
 margin: 0; padding: 0;
 background: url('images/yourphotohere.jpg') no-repeat top left;
 border-top: 3px solid black;
 border-bottom: 3px solid black;
 border-left: 0px solid black;
 border-right: 0px solid black;
}
#right {
 width: 203px;
 margin: 0; padding: 0;
 background-color: #444444;
 border-left: 3px solid black;
 float: right;
}
#bottom {
 width: 800px;
 height: 50px;
 margin: 0; padding: 0;
 background: url('images/bottom.png') no-repeat top left;
 clear: both;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
}

#header h1 {
 font-family: Impact, Arial Narrow, Arial;
 font-size: 40px;
 font-weight: bold;
 padding: 0 0 0 10px; margin: 0;
 text-align: left;
}
#header h1 a, #header h1 a:link, #header h1 a:visited {
 text-decoration: none;
 color: black;
}
#header h1 a:hover {
 text-decoration: none;
 color: #660000;
}
#header h2 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 margin: 0; padding: 0 0 0 10px; 
 text-align: left;
 font-weight: normal;
}

#footer a {
 color: #FF9D9D;
}

small {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
}

/* ----------------------- Main -------------------- */

#main {
 width:574px;
 margin: 0; padding: 10px;
}
.info {
 text-align: right;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 20px;
 font-weight: bold;
 color: #C17B71;
 text-transform:lowercase;
 padding: 0; margin: 0 0 20px 0;
}
.post {
 padding: 0; margin: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 color: black;
 text-align: justify;
}
.post img {
 padding: 2px; margin: 0 3px 0 3px;
}
.post a {
 color: #990000;
}
.post blockquote {
 background: url('images/blockquote.gif') repeat-y left top;
 padding: 0px 0px 0px 20px; margin: 2px 0 2px 0;
}
.post h3 {
 width: 574px;
 height: 27px;
 font-family: Impact, Arial Narrow, Arial;
 font-size: 20px;  font-weight: normal;
 background: url('images/h3.png') no-repeat left bottom;
 color: black;
 padding: 0; margin: 0;
 text-decoration: none;
}
.title h2 {
 width: 574px;
 height: 40px;
 font-family: Impact, Arial Narrow, Arial;
 font-size: 30px;  font-weight: normal;
 background: url('images/h2.png') no-repeat left bottom;
 color: black;
 padding: 0; margin: 0;
 text-decoration: none;
}
.title h2 a {
 width: 574px;
 height: 40px;
 color: black;
 font-family: Impact, Arial Narrow, Arial;
 font-size: 30px;
 text-decoration: none;
 padding: 0; margin: 0;
}
.title h2 a:hover {
 text-decoration: none;
 padding: 0; margin: 0;
}
.posted, .meta, .feedback, .info {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 font-weight: normal;
 text-transform:uppercase;
 margin: 0; padding: 0; 
 text-align: right;
 color: grey;
}
.meta a, .meta a:visited, .meta a:link, .feedback a, .feedback a:visited, .feedback a:link {
 color: #C17B71;
 margin: 0; padding: 0; 
}
.space {
 width: 100%;
 padding: 0; margin: 0;
 height: 40px;
}

/* ----------------------- Navigation Bar -------------------- */

.postnavigation {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 height: 13px;
 padding: 4px; margin: 0 0 20px 0;
 background: #EEEEEE;
}
.postnavigation a {
 color: #C17B71;
 text-decoration: none;
 text-transform: uppercase;
}
.left {
 float: left;
}
.right {
 float: right;
}
.leftdouble {
 float: left;
}
.rightdouble {
 float: right;
}

/* ----------------------- Sidebar -------------------- */


#sidebar {
 width:180px;
 margin: 0; padding: 10px 10px 0 0;
 font-family: Arial, Helvetica, sans-serif;
 float: right;
}
#sidebar ul {
 padding: 0; margin: 0;
}
#sidebar ul li {
 list-style-type: none;
 list-style-image: none;
 padding: 0; margin: 0 0 10px 0;
}
#sidebar ul li h2 {
 font-size: 20px;
 font-weight: normal;
 text-align: right;
 width: 180px;
 height: 27px;
 padding: 0; margin: 0;
 font-family: Impact, Arial Narrow, Arial;
 background: url('images/sidebarh2.png') no-repeat left bottom;
 color: #FF9900;
}
#sidebar ul li ul, #sidebar ul li ul li {
 padding: 0; margin: 0;
 font-size: 12px;
 line-height: 16px;
 text-align: right;
 color: white;
}
#sidebar ul li ul li, #sidebar ul li ul li a, #sidebar ul li ul li a:visited, #sidebar ul li ul li a:link, #sidebar ul li ul a {
 padding: 0; margin: 0;
 color: white;
}

#sidebar ul li ul li a:hover {
 padding: 0; margin: 0;
 color: #FF9900;
}
.page_item {
 padding: 0; margin: 0;
}
/* ----------------------- Search -------------------- */
#searchform {
 padding: 0; margin: 0;
}
#searchform input {
 width : 135px;
 height: 16px;
 margin : 5px 5px 2px 0;
 padding: 4px 5px 1px 5px;
 font-size: 13px;
 color: black;
 vertical-align : middle;
 background:  #EFEFEF;
 border: 0px solid;
}
#searchform #searchbut {
 color: black;
 width: 25px;
 height: 21px;
 padding: 0 0 2px 0; margin: 3px 0 0 0;
 background: #EFEFEF;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 border: 0;
}

/* ----------------------- Comments -------------------- */
#response textarea {
 width: 558px;
 height: 142px;
 padding: 4px;  margin: 0;
 background: #EFEFEF;
 border-left: 4px solid black;
 border-right: 4px solid black;
 border-top: 0px solid black;
 border-bottom: 0px solid black; 
 overflow: hidden;
}

#response h3 {
 width: 574px;
 height: 27px;
 font-family: Impact, Arial Narrow, Arial;
 font-size: 20px;  font-weight: normal;
 background: url('images/h3.png') no-repeat left bottom;
 color: black;
 padding: 0; margin: 0;
 text-decoration: none;
 text-align: left;
}

#response #author, #response #email, #response #url, #response #url {
 width: 246px;
 height: 15px;
 background: #EFEFEF;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 margin: 0 0 0 10px; padding: 3px 2px 3px 2px;
 border: 0px;
}
#response #submitcomment {
 width: 120px;
 height: 21px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 margin: 0; padding: 0;
 border: 0;
 background: #EFEFEF;
 float: left;
}
#response .text {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 text-align: left;
 height: 30px;
 color: black;
}
#response .postedby {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: right;
 font-size: 9px;
 color: #C17B71;
 text-align: right;
 text-transform:uppercase;
 margin: 0; padding: 0;
}
#response .postedby a, #response .postedby a:link, #response .postedby a:visited {
 color: white;
}
#response .commentlist {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: right;
 font-size: 9px;
 color: black;
 text-align: justify;
 list-style-type: none;
 width:425px; margin: 0; padding: 0;
}
#response .commentlist p {
 margin: 0; padding: 0;
}
#response .commentlist li {
 width: 558px;
 padding: 4px;  margin: 10px 0 0 0;
 background: #EFEFEF;
 border-left: 4px solid black;
 border-right: 4px solid black;
 border-top: 0px solid black;
 border-bottom: 0px solid black; 
}


/* ----------------------- Credits -------------------- */
#credits {
 width: 594px;
 height: 30px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 padding: 4px; margin: 0;
}
#credits a {
 color: #C17B71;
}

¿Se os ocurre donde puede estar el fallo? ¿Por donde puedo empezar a mirar?

Muchas gracias

Un saludo

[iamarock]

Hola:

Por favor, ¿Me podriais ayudar con este tema? ¿Alguna pista por donde empezar a mirar?

Muchas gracias

Un saludo

Luis

[Mikmoro]

Hola, iamarock,

Prueba a poner esto en tu css como primer selector, justo donde empieza ------base------:

* {margin: 0; padding: 0;}

y ahora cambia el selector #main por este otro:

#main {
width:574px;
margin: 0;
padding: 10px 0 10px 10px;
}

A ver qué tal.

Mikel.

[iamarock]

Hola Mikmoro:

Ya he conseguido mas o menos solucionar el problema para que se vea bien en IE 6 (aunque en el 5.5 y 5 sigue cascando) ajustando un poco el padding en el contenido del bloque central y de la columna derecha:

#main {
width:574px;
margin: 0;
padding-top: 10px;
padding-left: 10px;
}

#sidebar {
width:180px;
margin: 0; padding: 10px 8px 0 0;
font-family: Arial, Helvetica, sans-serif;
float: right;
}

Una solucion un tanto chapuzera pero bueno. De todas formas, tengo cusiosidad en saber porque pasa esto con IE, parece que el float: right no lo hace bien, y no aplica el padding correspondiente en la columna derecha.

¿Hay algun fix global para evitar esto en IE?

Un saludo

[Mikmoro]

¿Has probado con el cambio que te puse ayer? Es que yo lo he hecho y se ve perfectamente bien en IE6 sólo cambiando esas clases y poniéndolas exactamente así. Igual me faltaba algún componente de tu web, pero yo lo veía correctamente.

Sólo he pensado en IE6 al buscar solución. Quienes usen el 5 y el 5.5 deberían ir pensando en actualizar su navegador.

La primera clase que te pongo, la del asterisco, resuelve bastantes problemas de IE6, y la segunda debería arreglar lo de la columna principal. Con el padding que tenías, no te dabas cuenta, pero en FF la columna central entraba debajo de la de la derecha 10px sin empujarla, mientras que en explorer sí crece y la empujaba hacia la derecha, en tu caso hacia abajo.
Hay muchísimo problemas con explorer, pero en este caso era un problema de diseño de la css.

Mikel.

[iamarock]

Hola Mikmoro:

¿Que hace exactamente este selector?:

* {margin: 0; padding: 0;}

Te lo digo porque tras aplicarlo ha desaparecido el espaciado entre los parrafos en las entradas de mi pagina (gestionada con Wordpress)

Muchas gracias por todo

Un saludo

Luis

[Mikmoro]

El asterisco es una expresión regular que significa "cualquiera". En este caso, lo que hace es decir que cualquier elemento, es decir, todos (los que lo permitan), tengan un margin y un padding a cero. Esto evita que tengas que torear con los márgenes preestablecidos por defecto en algunos elementos, y sobre todo con sus diferencias de interpretación en los distintos navegadores.

Es como si dijéramos "poner a cero el margen y el padding de la mayoría de los elementos", o eliminar los que llevan por defecto.

Aunque al principio pueda parecer una molestia, porque ya tenías todo diseñado contando con esos valores por defecto sin saberlo, al aplicarlo verás que en general muchos elementos se comportan de manera igual en los distintos navegadores, lo que es una gran ventaja.

Mikel.

[iamarock]

Hola

Gracias por la explicacion, pero no entiendo entonces porque me junta todos los parrafos en uno en cada post de la pagina. Entiendo que el contenido de cada entrada se define aqui:

.post {
padding: 0; margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
text-align: justify;
}

Y ahi ya se indica su propio margin y padding para este elemento, por lo que no deberia afectarle, pero sin embargo le afecta.

Lo siento si soy un poco pesado

Muchas gracias

Un saludo

[Mikmoro]

Dices por un lado:

"entonces porque me junta todos los parrafos en uno en cada post"

pero luego dices que la etiqueta post ya tenía su margen y su padding.

El margen que tengas en la etiqueta post, afectará a unos post con respecto a otros post, pero no a lo que ocurre dentro de ellos, y tú estás diciendo que te junta los párrafos dentro de ellos. Esto es porque seguramente ahora se ha eliminado el margin de la etiqueta "p", que será quien marque la distancia de unos párrafos a otros.

Busca el la css el selector "p", o añádelo si no lo tienes, y márcale ahí la distancia superior e inferior que quieres que tengan los párrafos.

Mikel.

[iamarock]

Oh claro, el selector "p", no habia caido.

Muchisimas gracias Mikel, ya he aplicado todas tus recomendaciones y ya la pagina parece que se ve bien en IE6

Un saludo

Luis

[Mikmoro]

Me alegro de que todo vaya bien.

Si tienes problemas ya sabes dónde estamos.

Hasta la vista.

Mikel.