Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/04/2008, 01:38
iamarock
 
Fecha de Ingreso: agosto-2003
Mensajes: 14
Antigüedad: 20 años, 8 meses
Puntos: 0
Problema de Diseño en IE (6, 5.5, 5)

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