Foros del Web » Creando para Internet » CSS »

Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Estas en el tema de Sidebar de WordPress se ve bien en IE 7 pero no en IE 6 en el foro de CSS en Foros del Web. Hola, como estan ? Aunque no lo crean, he instalado Wordpress para un amigo, instalado un Template (NATURE) en el blog y todo se ve ...
  #1 (permalink)  
Antiguo 30/09/2008, 13:38
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 15 años, 5 meses
Puntos: 0
Exclamación Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Hola,

como estan ?

Aunque no lo crean, he instalado Wordpress para un amigo, instalado un Template (NATURE) en el blog y todo se ve fantastico.

Pero mi amigo me dice "Voy a varios CYBERS y se ve muy mal"

Yo.. (que lo veo fantástico en mi I.Explorer 7 o en Firefox) pense que era un tema de resolucion...

Pero descubro que es una incompatibilidad con algunas instrucciones de CSS en IE 6.

Concretamente el sitio es www . oscarcapobianco . com

Y si lo miran en IE 6, verán que la barra derecha no se muestra sino por debajo de todo el cuerpo del sitio. en lugar de mostrala como corresponde (a la derecha).

El codigo CSS del SIDEBAR es el siguiente... a ver si alguien detecta algo que ya hace dias que estoy buscando info y no doy con la solución.

Código:
/*-------------------- Sidebar --------------------*/


#sidebar { float: right; width: 290px; margin: 1; padding: 20; }

#sidebar h2 { display: block; margin: 16px 0 6px 0; padding: 0 0 10px 3px; font-size: 1.4em; list-style-type: none; color: #48791e;text-transform:uppercase; }

#sidebar ul { clear: both; margin: 0; padding: 0 0 20px 0; list-style-type: none; }
#sidebar ul li { clear: both; }

#sidebar ul.no-splitted li { background: transparent url(images/dot.jpg) no-repeat 5px 4px; padding: 0 0 0 23px; }

#sidebar ul.no-splitted ul li { margin: 0 -5px; }
#sidebar p, #sidebar form { margin: 0 5px; padding: 0 0 20px 0; }
#sidebar ul.blc { padding: 0 5px; }

#sidebar li#sidebar-splitted { float: left; width: 100%; margin: 0 0 15px 0; }
#sidebar-splitted .splitted-left { float: left; width: 140px; }
#sidebar-splitted .splitted-right { float: right; width: 145px; }

ul.splittedlists li { background: transparent url(images/dot.jpg) no-repeat 5px 4px; padding: 0 0 0 23px; }

ul.splittedlists ul li { margin: 0 0 0 -23px; }
Desde ya, muchas gracias a quien pueda ayudarme.

Saludos Cordiales

Pablo Tilotta
  #2 (permalink)  
Antiguo 30/09/2008, 14:02
Avatar de TresPuntoDos  
Fecha de Ingreso: septiembre-2008
Ubicación: Madrid, España
Mensajes: 242
Antigüedad: 15 años, 5 meses
Puntos: 3
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

El problema no esta en esos estilos, esta en que el div wrapper tendria que ser mas ancho por que si no al ser float el div sidebar intenta ocupar el ancho que necesita y como no tiene suficiente espacio se te coloca debajo

Cambia la propiedad width del wrapper deberia solucionarse, pero si quieres que siga siendo de 957px tendrias que hacer mas pequeños los div interiores

Un saludo
  #3 (permalink)  
Antiguo 30/09/2008, 14:06
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Te agradezco muchisimo tu ayuda....

Pero disculpa mi ignorancia....

Donde está ese WRAPPER ?

Saludos
  #4 (permalink)  
Antiguo 30/09/2008, 14:13
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Yo ya he achicado hasta 100 px la seccion PAGES, que estaba en 660 px de Width pero nada

Y visiblemente se nota que ambas secciones sumadas no llenan el WIDTH ni de casualidad... pero aun asi lo muestra debajo

Estoy desesperado porque hace dias y dias que no encuentro solucion

Saludos
  #5 (permalink)  
Antiguo 30/09/2008, 15:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

En tu diseño hay algunas cosas realmente extrañas, pero imagino que son de wordpress, que las hace así, o de la plantiila que has usado.

Prueba a quitarle el clear a ul, que no tiene ningún sentido:

#sidebar ul {clear:both;
list-style-type:none;
margin:0pt;
padding:0pt 0pt 20px;
}

Si no resulta, quítalo también de los li:

#sidebar ul li {clear:both;
}

A ver si cambia algo.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 30/09/2008, 15:42
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Hola, gracias !!!

Voy a probar.

En el diseño ahora se ven cosas raras, porque he conseguido subir la barra derecha a fuerza de aumentar a 1010 el width (antes estaba en 957)

Por eso se ven esa cabecera tan mala... el problema ahora es que antes... al menos en FireFox y I.E 7 se veia perfecto...

ahora para compatibilizar con I.E 6.0 se ve mal en los 3 navegadores.. pero al menos en los 3 muestra la SideBar como corresponde a la derecha.

Por algun motivo hay margenes que en I.E 6.0 se están tomando sobredimencionados y en los nuevos navegadores no.

Alguna Sugerencia ?

Gracias
  #7 (permalink)  
Antiguo 30/09/2008, 15:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Con cosas raras me refería en el código. La cabecera ya se ve que la estás tocando y la arreglarás, pero por ejemplo no imagino por qué toda la barra derecha está dentro de un "ul" y cada bloque es un "li". Las "ul" son listas desordenadas, pero listas de elementos, no de módulos.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 30/09/2008, 15:59
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Buena Pregunta...

Quizas el dueño del template pueda responderla, aunque le he escrito por este problema y obtuve menos respuesta que BUSH en el Congreso.

Les pego el CSS completo para ver si me pueden decir porque esta haciendo lo que hace.

Mil gracias por la ayuda...

Código:
/*-------------------- General --------------------*/


body { margin: 0; padding: 0; background :#c1e19e url("images/bg.jpg") repeat-x;background-attachment:fixed;  font: 10px "Verdana", Tahoma, Trebuchet MS,Arial, Sans-Serif; color: #000; text-align: left; }

p, ol, ul { line-height: 150%; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-style: normal; font-weight: normal; background: transparent; }

h1 { font-size: 2.2em;  }
h2 { font-size: 1.6em;  }
h3, h4, h5, h6 { font-size: 1em;}

a, a:link { color: #79c935; text-decoration: none; }
a:hover, a:active { text-decoration:none;color:#000;}

blockquote { margin: 10px; padding: 10px 0px 10px 30px; color:#000; background-color:#a9d186; border : 1px solid #577241;}
code{ display:block; overflow:auto; text-align:left; margin: 10px 0 10px 0; padding: 5px 10px 5px 10px; }

small { font-size: 0.8em; }

img { padding:5px; border:0; }
img.right { float: right; margin:5px 0 5px 5px; }
img.left { float: left; margin:5px 5px 5px 0px; }
a img         {border:none;}

.left         { float: left; }
.right        { float: right; }
.center { text-align: center; }
.alignleft { float: left; margin-right: 10px; }
.alignright { float: right; margin-left: 10px; }

.navigation { display:block; padding: 20px; }


/*-------------------- Layout --------------------*/


#outline { width: 1010px; margin: 0 auto; padding: 0; background: #fbe7ce;  font-size: 1.3em;}

#wrapper { float: left; width: 1010px; margin: 0 !important; margin: -15px 0 0 0; /* IE hack */ padding: 0; background: #fff;}
  #9 (permalink)  
Antiguo 30/09/2008, 16:00
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Aqui el resto

Código:
/*-------------------- Header --------------------*/


#header { width: 957px; height: 216px; background: url(images/header.jpg) no-repeat left top; }
#header .blogtitle { width: auto; height: 118px; }
#header h1 { padding: 8px 0 0 30px; }
#header h1 a { color: #a4da77; text-decoration: none; }
#header h1 a:hover{Color:#fff;}
.description { color: #a4da77; padding-left: 30px; }

#navbar { clear: both; float: left; width: 957px; height: 45px; height: 45px; background: url(images/menu.jpg) no-repeat; }

ul.menu { float: left; margin: 0; padding: 0 15px; list-style-type: none; }
ul.menu li { float: left; }
ul.menu li a { float: left; display: block; height: 28px; padding: 3px 15px 0 25px; line-height: 24px; color: #48791e;text-transform:uppercase; }
ul.menu li a:link, ul.menu li a:visited { color: #48791e; background: none; text-decoration: none; }
ul.menu li a:hover, ul.menu li a:active { color: #000000; background: transparent url(images/menu.jpg) repeat-x 0 0; text-decoration: none; }

ul.menu li.current_page_item a:link,
ul.menu li.current_page_item a:visited,
ul.menu li.current_page_item a:hover,
ul.menu li.current_page_item a:active { color: #fff; font-weight: bold;  text-decoration: none; }


/*-------------------- Search --------------------*/


.searchbar { float: right; width: 290px; height: 30px; margin: 0; }
.searchform { width: 290px; height: 20px; text-align: left; }
.Search input.keyword { border: none; background: #fff url(/images/search.jpg) no-repeat; border: none; padding: 12px 12px 14px 12px; width: 240px; } 


/*-------------------- Pages --------------------*/


#content { float: left; width: 600px; height: 100%; }

.pages { float: left; width: 570px; }
.pages-border { clear: both; width: 100%; height: 6px; }

.page-previous { float: left; padding: 10px 0 16px 30px !important; padding: 0 0 15px 30px; /* IE Hack */ }
.page-next { float: right; padding: 10px 30px 16px 0 !important; padding: 0 30px 15px 0; /* IE Hack */ }

.page-title { width: 630px; margin: 20px 0 0 0; }
.page-title h2.page-title-border { padding: 0 0 0 30px; line-height: 48px; color: #666;}


/*-------------------- Post --------------------*/


.post { padding: 20px 30px; background: transparent;  }
.postentry { }

.posthead { position: relative; clear: left; margin-left: 45px; }

.posttitle a:link, .posttitle a:visited { color: #48791e; text-transform: uppercase;}
.posttitle a:hover {color:#000;}
.font-family a:hover, .posttitle a:active { }

.postmeta, .postmeta a { margin: 4px 0 ; font-size: 11px; color: #3c8705; }
.post-comment { padding: 0 0 0 20px; background: url(images/dot.jpg) no-repeat 1px; }
.post-filed { padding: 0 0 0 20px; background: url(images/dot.jpg) no-repeat 1px; }

.postdate { position: absolute; top: 0px; left: -45px; text-align: center; margin: 0; padding: 2px 8px 2px 0px; list-style: none; border-right: solid 1px #719d39;}
.postdate .year { display: block; font-size: 11px; font-weight: normal; text-transform: lowercase; line-height: 11px; color: #719d39; }
.postdate .month { display: block; font-size: 11px; font-weight: normal; text-transform: uppercase; line-height: 11px; color: #719d39; }
.postdate .day { display: block; font-size: 22px; font-weight: normal; line-height: 22px; color: #719d39; letter-spacing: -1px;}


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


#sidebar { float: right; width: 290px; margin: 1; padding: 20; }

#sidebar h2 { display: block; margin: 16px 0 6px 0; padding: 0 0 10px 3px; font-size: 1.4em; list-style-type: none; color: #48791e;text-transform:uppercase; }

#sidebar ul { margin: 0; padding: 0 0 20px 0; list-style-type: none; }
#sidebar ul li {  }

#sidebar ul.no-splitted li { background: transparent url(images/dot.jpg) no-repeat 5px 4px; padding: 0 0 0 23px; }

#sidebar ul.no-splitted ul li { margin: 0 -5px; }
#sidebar p, #sidebar form { margin: 0 5px; padding: 0 0 20px 0; }
#sidebar ul.blc { padding: 0 5px; }

#sidebar li#sidebar-splitted { float: left; width: 100%; margin: 0 0 15px 0; }
#sidebar-splitted .splitted-left { float: left; width: 140px; }
#sidebar-splitted .splitted-right { float: right; width: 145px; }

ul.splittedlists li { background: transparent url(images/dot.jpg) no-repeat 5px 4px; padding: 0 0 0 23px; }

ul.splittedlists ul li { margin: 0 0 0 -23px; }


/*-------------------- Bottom --------------------*/


#bottom { clear: both; float: left; width: 1010px; height: 100%; margin: 0 0 0 0; padding-top: 0; text-align: left; font-size: 15px;background:#fff; }
#bottom-divs { float: left; clear: both; margin: 0; padding: 0px; }

#bottom-left, #bottom-mid, #bottom-right { width: 30%; padding: 20px 0 40px 20px; float: left; }

#bottom h2 { margin: 0 0 10px 0; padding: 0 8px; font-size: 1.6em; color: #48791e; text-transform:uppercase;}

#bottom ul { margin: 0; padding: 0; list-style-type: none; border-top: 1px solid #48791e; }
#bottom ul li { line-height: 25px; border-bottom: 1px dashed #719d39; }
#bottom ul li a { display: block; padding:0 10px; }
#bottom ul li a:hover { background:  5px 5px; padding: 0 0 0 10px; }
#bottom-sep { clear: both; }


/*-------------------- Footer --------------------*/

#footer { clear: both; height: 60px; background: url(images/footer.jpg); width:1010px; text-align:center;color:#214502; }

#footer p { margin: 0; padding: 13px 25px; font-size: 0.7em; line-height: 200%; }
#footer p a:link, #footer p a:visited { color: #3c8705; }
#footer p a:hover { color: #fff; }


/*-------------------- Calendar --------------------*/


#wp-calendar { margin: 0pt; text-align: center; }
#wp-calendar caption { color: #82d33c;text-transform:uppercase;}

#wp-calendar th {color :#fff; background:#497028;}
#wp-calendar td { height: 24px; width: 34px; line-height: 20px; color: #82d33c;  }
#wp-calendar .pad { }
#wp-calendar td a { display: block; width: 24px; height: 24px; text-decoration: none; line-height: 24px; }

#wp-calendar #prev, #wp-calendar #next { }
#wp-calendar #prev a { width: 49px; }
#wp-calendar #next a { margin: 0pt 0pt 0pt 30px; width: 49px; }
#wp-calendar #today { color: #111; font-weight: bold; }
#wp-calendar #today a { font-weight: bold; }


/*-------------------- Comment --------------------*/


.comments { padding: 0px; margin: 20px 0px 20px 0px ; }

.posttrackback { margin: 0px; padding: 0 0 50px 0; font-size: 10px; }
.posttrackback p { margin: 2px 0px; padding: 2px 0px 2px 23px; list-style-type: none; }
.posttrackback a:link, .posttrackback a:visited { color: #3c8705; text-decoration: none; }
.posttrackback a:hover, .font-family a:active { color: #3c8705; text-decoration: underline; }

.commentlist h3 {font-size: 15px; font-weight: bold; letter-spacing: 0px; padding: 0px 0px 5px 0px; margin: 0px 0px 20px 0px; }
.commentlist ol { padding: 0px; margin: 0px;}
.commentlist li { position: relative; padding: 0px; margin: 0px 0px 20px 0px; list-style-type: none; }

.commentlist .listuser { margin: 0px; padding: 0px 0px 0px 40px; font-size: 14px; line-height: 14px; font-weight: bold;}
.commentlist .listuser a { text-decoration: none;}
.commentlist .font-family a:visited { text-decoration: none;}
.commentlist .listuser a:hover { text-decoration: none;}

.commentlist .listnr { font-size: 26px; position: absolute; line-height: 26px; color: #ccc; top: 0px; left: 0px; text-align: center; padding: 2px 10px 2px 0px; margin: 0; }

.commentlist .listdate { padding-left: 40px; font-size: 11px; line-height: 11px; }
.commentlist .listdate a { text-decoration: none; color: #666;}
.commentlist .listdate a:visited { text-decoration: none; color: #666;}
.commentlist .listdate a:hover { text-decoration: none; color: #666; }

.commentlist .listcontent { line-height: 14px; margin: 0px 0px 10px 0px;}
.commentlist .listcontent p { padding: 3px 0 15px 0; margin: 3px 0px; line-height: 150%; }

.form input.submitcomment { width: auto; height: 25px; padding: 2px 10px 3px 10px; background: #e5edff url(images/submit.gif) repeat 0 0; }
.form input.submitcomment:hover { background: #f3f3f3 url(images/submit_hover.gif) repeat 0 0; }


.form { width: 580px; }
.form h3 {font-size: 15px; font-weight: bold; padding: 0px 0px 5px 0px; margin: 0px 0px 15px 0px; }
.form p { padding: 0px; margin: 0px; }
.form p label { padding-bottom: 11px; display: block; }
.form p label small { font-size: 10px; }

.form .textfield { background: #fff; border: solid 1px #ccc; padding: 4px; margin-right: 15px;}
.font-family .textarea { background: #fff; border: solid 1px #ccc; padding: 4px; margin-bottom: 10px;}



#options { padding: 5px 20px 0 0; text-align: right; float: right; }
#options ul { float: left; display: inline; margin-left: 10px; }
#options li { float: left; list-style: none; padding: 5px; }
#options li a { display: block; width: 5px; margin: 1px; padding: 5px; height: 5px; }
#options li a span { display: none; }

body.red #options li.font-family, body.blue #options li.blue, body.white #options li.white, #options li:hover { padding: 5px; }
  #10 (permalink)  
Antiguo 30/09/2008, 16:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

¿Lo del clear both no te ha servido de nada?
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 30/09/2008, 16:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Ah, no, no.

El problema está en este selector:

.linklove {
width:410px;
margin:0 auto 10px!important;
padding:0!important;
text-align:center!important;
}

que correponde a un elemento p de la columna derecha

<p id="ll" class="linklove">

Está en la hoja de estilo grass_green.css

Y que además es el causante de ese enorme scroll horizontal en FF sin sentido.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 30/09/2008, 16:21
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Para que vean porque me estoy volviendo loco

FIREFOX



I.EXPLORER 7.0



I.EXPLORER 6.0

  #13 (permalink)  
Antiguo 30/09/2008, 16:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Mira mi anterior mensaje.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 30/09/2008, 16:23
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Cita:
Iniciado por Mikmoro Ver Mensaje
Ah, no, no.

El problema está en este selector:

.linklove {
width:410px;
margin:0 auto 10px!important;
padding:0!important;
text-align:center!important;
}

que correponde a un elemento p de la columna derecha

<p id="ll" class="linklove">

Está en la hoja de estilo grass_green.css

Y que además es el causante de ese enorme scroll horizontal en FF sin sentido.
Que deberia hacer con ese WIDTH:410px ? y porque no afecta a IE 7.0 y Firefox ?

Saludos y mil gracias por tu tiempo y ayuda
  #15 (permalink)  
Antiguo 30/09/2008, 16:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

Quítalo, sencillamente. Y sí les afecta, pero les está haciendo sacar un scroll horizontal enorme innecesariamente.
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 30/09/2008, 16:39
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

SIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII !!!!!!

GENIO !!!!

Te debo 1... mil gracias... yo sabia que en el foro de mi amigo CVANDER me darian la respuesta....

yo urgeteando en el CSS del sitio y era uno de los Plugins que me rompió todo...

Mil gracias nuevamente.

Saludos

Pablo Tilotta
  #17 (permalink)  
Antiguo 30/09/2008, 16:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sidebar de WordPress se ve bien en IE 7 pero no en IE 6

De nada, es un placer.

Saludos.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:21.