La barra lateral de mi blog no se ve en IE 8

Inicio Foros WordPress Themes y Diseño La barra lateral de mi blog no se ve en IE 8

Este debate contiene 21 respuestas, tiene 6 mensajes y lo actualizó  harlam hace 7 años, 11 meses.

  • Autor
    Publicaciones
  • #19684

    harlam
    Participante

    <p>Muy buenas. Resulta que mi blog, http://www.sindinero.org/blog se ve bien en Firefox, pero en IE 8 la barra lateral se desplaza hacia abajo y no se ve…salvo que hagas scroll hasta el último post. El nombre del tema es "iNspiration", y parece que el CSS está optimizado para IE 6, pero no para versiones superiores. Sé que a muchos webmasters que utilizan wordpress les ha ocurrido algo parecido, pero en el código del archivo style.css del tema "iNspiration" no he identificado la parte que provoca este problema en IE 8. ¿Alguien podría indicarme qué podría hacer? Gracias por adelantado!!
    </p>

  • #48054

    josep
    Participante

    normalmente los problemas con IE vienen dados por los <DIV> y lo dificil es encontrar el tamaño adecuado

  • #48065

    harlam
    Participante

    Hola josep, gracias por contestar. Cuando hablas del tamaño…¿te refieres al “width”?, ¿por dónde empezarías a hacer pruebas?

  • #48067

    imported_josec
    Participante

    es raro que no te funcion en IE8 y en IE6 si, creo que es a reves

    pero puedes crear estilos para esos navegadores en particular añadiendo condincionales

    ej:

    saludos

  • #48071

    harlam
    Participante

    Hola José…es que creo que el theme no se ha actualizado desde la versión 1.2 : “This version 1.2 i have change some of code, optimize CSS for ie6 users and others little bit change. Thank you for downloads.”

    Respecto a esos condicionales…¿son unas líneas de código que debería añadir a style.css? ¿dónde debería copiarlas? Perdona que haga preguntas tan tontas, pero no mi conocimiento del asunto es muy limitado. Gracias!!

  • #48086

    imported_josec
    Participante

    esas condiciones van dentro de la etiqueta “head” en header.php

  • #48094

    Camelot
    Participante

    Te comento que en IE9 la barra lateral está desplazada hasta bien abajo. Ni siquiera el modo de compatibilidad lo puede arreglar (y mira que este me ha resuelto provisionalmente varios problemas de visualización).

    Si la “desaparición” que reportas es igual a la que yo experimenté en IE9, entonces el problema está en el diseño de tu theme, posiblemente porque los anchos establecidos no concuerdan. De hecho, la cuestión es que Firefox y Opera (también estuve probando con este navegador) tratan de “arreglar” estos problemas con más éxito que IE. Si te fijas bien en Firefox tampoco se ve bien completamente ya que unas viñetas (hasta 2) pueden verse en la parte titula “nuevos comentarios”, en Opera la segunda viñeta desaparece y solo se ve una.

    Si has tocado el diseño de tu theme para acomodarlo a tu gusto, prueba ponerlo tal como era originalmente a ver si el problema persiste.

    Yo también soy de adaptar mucho los temas a mi gusto, por eso tengo anotados todos los cambios que hago por si tengo que revertirlos o arreglarlos si después me doy cuenta que crean algún problema inesperado. Anotar es algo que también me ha ayudado cuando el tema se actualizado y debo volver a implementar los cambios que hice a la anterior versión.

    Saludos.

  • #48124

    harlam
    Participante

    He probado lo de José Cabezas, pero no ha funcionado. Camelot, nunca he tocado el diseño del theme…es ahora que estoy probando cosas para arreglar esto, pero no estoy teniendo éxito (lo cual no es de extrañar, porque voy un poco a ciegas por no saber html). ¿Cómo lo resolviste en tu caso, Camelot? Es decir…¿qué “width” específico tuviste que tocar?

  • #48126

    guillermo davis
    Participante

    Disculpa mi ignorancia José Cabezas, en que parte del header.php se insertan los código???

  • #48171

    imported_josec
    Participante

    Disculpa mi ignorancia José Cabezas, en que parte del header.php se insertan los código???

    antes de de “</head>”

    pero no es llegar y pegar el ejemplo (es solo una forma ilustrativa).. sino que arreglar los estilos correspondientes para cada version de IE

  • #48190

    Camelot
    Participante

    Bueno, si realmente te gusta el theme que estás usando ahora (yo te recomendaría usar otro debido a estos problemas), me gustaría que me indicaras de donde lo bajaste, así podría revisar el código y sobre todo instalarlo en mi wordpress que tengo en local para echarle una mirada, hacer correcciones y si logro resolverlo te paso una solución ya probada y no andar un poco a tientas. No siendo un experto en estos menesteres todo lo he resuelto así, mediante prueba y error.

  • #48200

    pestanin
    Participante

    Hola a todos.

    Habitualmente este “fallo” está provocado por que el elemento content empuja el sidebar y éste se va hacia bajo porque no tiene espacio. Las formas más habituales de corregirlo son probando a poner un width menor a los divs content y sidebar o un width mayor al contenedor principal para hacer más espacio que en el caso de tu theme se llama wrapper. También probaría a mirar si quitando el sidebar de Google y el widget de Facebook el otro sube para descartar que no sea un problema de floats.

    A pesar de todo estoy con Camelot y es que usar un theme preparado para IE6, a estas alturas, resulta poco práctico.

    Un saludo.

  • #48203

    pestanin
    Participante

    Hola de nuevo.

    He bajado el theme desde [url=http://wordpress.org/extend/themes/inspiration]aquí[/url] y lo he probado en local viendo que funciona perfectamente en varios navegadores (Opera, Chrome, IE8, Firefox y Safari). No es exactamente igual al tuyo así que no sé si lo has modificado y es cuando se ha “descojonao” o tú tienes una versión antigua…

    [url=http://www.nomiresatras.com/prueba_inspiration.jpg]Imagen en IE8[/url]

    Un saludo.

  • #48284

    harlam
    Participante

    Muy buenas!! Antes que nada…muchas gracias por vuestra atención.

    Estoy considerando probar con otro tema de tres columnas, pero hasta ahora no he encontrado nada que me convenza. He quitado los anuncios de google adsense y el widget de facebook, pero no ha solucionado nada (así que descartamos eso de los floats…). Pestanin, tengo la misma versión que te has bajado…las modificaciones que se hicieron son mínimas (algún color de fondo, la imagen de la cabecera…). También cabe la posibilidad que el tema funcione bien en local para el IE8 y deje de hacerlo al subirlo online (según he leído). Quiero intentar modificar esos “width” (el del wrapper, por ejemplo), pero en el código del css del tema no consigo identificar qué es lo que tengo que tocar. ¿Es posible que tenga que mirar en esta parte del código?. Es decir, la que se refiere a la estructura (copio y pego) :

    ¿Cómo puedo modificar los anchos del wrapper y del sidebar tocando el código anterior?. Muchas gracias!!

  • #48285

    imported_josec
    Participante

    existen extensiones para los navegadores que te permiten visualizar los contenedores de las secciones de tu plantillas. una vez identificado el id o clase, haces el cambio correspondiente en el CSS

    ej: web developer, para firefox y chrome

    saludos

  • #48287

    harlam
    Participante

    Hola José. Me he instalado la extensión (súper útil para diseñadores). Hay una opción que te permite identificar los contenedores, simplemente pasando el puntero del ratón por la página. Según he visto, hay un div llamado #wrapper .container12 (parece que hay otros divs que “dependen” de éste…header, sub-header y content-wrapper). Supongo que habrá que cambiar el “width” de header, sub-header y content-wrapper, en la misma proporción. ¿Pero cómo se cambian? No consigo ver en el código ninguna línea que me permita cambiar el width. Un ejemplo :

    Localizo la línea que alude a content-wrapper :

    #content-wrapper { margin-top:15px; padding-bottom:20px !important; }

    Puedo modificar los márgenes…pero, ¿¿el width??. Puffff, ya no sé ni dónde mirar…

    Gracias, una vez más

  • #48291

    imported_josec
    Participante

    me acabo de dar cuenta.. que la plantilla que usas esta hecha con el framework 960 grid system.. este framework css utiliza un [b]ancho fijo de 940px[/b], más 10px por lado de derecho e izquierdo sumando 960px.

    la unica forma de reducir el ancho es de 2 formas:

    1ra forma:

    tienes cambiar el numero de columnas en las clases los grid respectivos y modificar y reemplazar la diferencia por prefix y suffix como corresponda tanto para el lado derecho como el izquierdo.

    2da forma:

    es eliminar todas las clases relacionadas con el framework (grid_n, container_12,alpha,omega,etc) y colocar los anchos respectivos en los ID (#wrapper,#sidebar,#content,etc.)

    saludos

  • #48293

    imported_josec
    Participante

    se me olvido decir que en mi blog hay un tutorial para el manejo de F. 960 G.S. en plantillas wordpress.

    aca los link

    http://www.jcabezas.net/2010/11/crear-un-plantilla-wordpress-con-960-grid-system-parte-i/
    http://www.jcabezas.net/2010/11/crear-una-plantilla-wordpress-con-960-grid-system-parte-ii/

    espero que sea de ayuda

  • #48294

    pestanin
    Participante

    Buenas de nuevo.

    También lo veo correctamente online.

    Un saludo.

  • #48324

    harlam
    Participante

    Uffff…es mucho más complicado de lo que yo pensaba. Me he mirado por encima los tutoriales de José Cabezas, y ahora por lo menos ya tengo una visión general, pero tengo que ir al detalle para poder modificar el ancho del wrapper. En suma…me tengo que poner las pilas con el CSS para poder ser un poco autosuficiente y no dar tanto el coñazo. Así que nada, voy a ver hasta dónde soy capaz de llegar…ya os contaré. Muchas gracias a todos!!!

  • #48329

    josep
    Participante

    esperamos la respuesta ya que somos muchos los afectados

  • #48699

    harlam
    Participante

    ¡¡Solucionado!!

    Lo que pasaba es que el archivo index.php no incluía el DOCTYPE :

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    Sin el doctype, el explorer interpretaba la página de diferente manera que Firefox, de ahí que ocurriese el error.

    Muchas gracias a todos

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest

Ir al contenido