JabalíDigital

Problemas con Internet Explorer

26 de Mayo 2004

Es la primera vez que pido ayuda desde aquí, pero también es la primera vez que soy incapaz de resolver un problema. Como sé que muchos de vosotros sois expertos diseñadores quizás podrais ayudarme. Además, es probable que esto le ocurra a alguien más, así podremos solucionarlo. Sucede lo siguiente.

Esta bitácora tiene ciertos problemas para leerse en Internet Explorer:
1. El título aparece en la izquierda, mientras que debería ir centrado.
2. No aparecen las líneas divisorias entre post.
3. Internet Explorer se "come" el final de las páginas.
4. El más molesto: cuando un artículo supera los 5 o 6 comentarios desaparecen los botones vista previa y enviar (en las entradas individuales). Ejemplo.
Me imagino que será un problema con las hojas de estilos, por supuesto, todos estos errores desaparecen en Mozilla.

Por Adriano Morán :: Enlace a este artículo :: Comentarios (15) :: Referencias (0)
:: Archivado en a las 20:14 :: meneamelogo.jpg Menéame
« :: »



Otros artículos archivados en la categoría :



Pub

Comentarios de los lectores:

1. Publicado por eltercerhombre:

Ok, respondamos a la primera:

IE6 win XP, mientras curro :-P

compara tu .title con este y fijate en las diferencias. Este funciona:

BODY { text-align:centre;
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: arial,
sans-serif; BACKGROUND-COLOR: #ffffff
}

.title {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 20px; Z-INDEX: 4; PADDING-BOTTOM: 0px; COLOR:

#727670; PADDING-TOP: 0px; FONT-FAMILY: arial, sans-serif; LETTER-SPACING: 10px; POSITION: absolute; TOP: 5px; HEIGHT: 80px;

TEXT-ALIGN: center;margin: 0 auto;
}

Hecho en tres segundos, a si que al o mejor puedes pulirlo.

Si me sobra tiempo sigo.

Saludos


26 de Mayo 2004 a las 09:55 PM #
2. Publicado por eltercerhombre:

nº 4

.outside {
z-index:2; RIGHT: 0px; LEFT: 0px; MARGIN-LEFT: 220px; MARGIN-RIGHT: 220px; margin-TOP: 80px;
}

No quiero decir ni mucho menos que esto sea lo correcto, pero funciona en IE y te dará una idea de porque no se te ve correctamente. En fondo todo es una cuestion de planteamiento a la hora de diseñar la pagina.

Saludos.

26 de Mayo 2004 a las 10:20 PM #
3. Publicado por Jabalí:

Coño que curioso. He puesto ese código para el título y aparece perfecto en IE, pero en Mozilla se va para la izquierda. Así que estamos igual ;) Pero el que de verdad me molestaba, el cuarto problema, se soluciona perfectamente con el código que me has dado, sólo que en vez de "margin top" es "margin botton". Muchísimas gracias tercerhombre.

26 de Mayo 2004 a las 11:26 PM #
4. Publicado por cubis:

Jejeje.. la mejor solución....... Invita a tus usuarios a usar Firefox :P Jejeje... Bueno, es un poco drastica pero ellos al final te lo agradeceran. jejeje.

27 de Mayo 2004 a las 01:38 AM #
5. Publicado por Hermann:

Yo te puedo ayudar con la del logo, intenta usar
margin-left: auto;
margin-right: auto;

27 de Mayo 2004 a las 09:38 AM #
6. Publicado por Johny:

El problema, a pesar de que trabajas con xhtml y haces un uso bastante adecuado de la semantica, es que abusas de los posicionamientos y hay excesivos valores que se repiten en demasiadas ocasiones, heredandose de unos elementos a otros.

Por ejemplo: El problema que tienes con el encabezado está en tu CSS, donde ahora mismo indicas estas ordenes:

.title {
font-size: 20px;
font-weight: bold;
font-family: arial, sans-serif;
text-align: center;
letter-spacing: 10px;
color: #727670;
position: absolute;
padding: 0px;
height: 80px;
left: 10px;
right: 10px;
top: 5px;
z-index: 4;
}


La mayoría son innecesarias en un encabezado, comenzando por el posicionamiento absoluto, y las puedes simplificar de este modo:


.title {
text-align: center;
margin: 10px auto 0;
height: 80px;
}

Si lo haces verás que la visualización resultará totalmente correcta para cualquier navegador.

En cualquier caso si deseas darle un repaso a la CSS y a la semántica de tu código, pásate cuando quieras por el foro de ayuda que tenemos en trovadores, pega allí tus templates, y estaré encantado de ayudarte en lo que esté en mis manos.

27 de Mayo 2004 a las 03:54 PM #
7. Publicado por Jabalí:

Mil gracias a todos. Ya están todos los problemas solucionados, menos el de las líneas divisorias entre post. Aunque este no me molesta demasiado. Gracias Hermann por tu consejo, pero finalmente lo que funcionó fue el código de johny aunque tuve que modificar un poco el outside (top: 5px, estaba a 80). Otra vez, muchísimas gracias.

27 de Mayo 2004 a las 08:13 PM #
8. Publicado por eltercerhombre:

Es bueno ver que la gente se ha animado y que ya has cubierto lo más necesario.

Por otra parte, estoy de acuerdo con Johnny: abusas del posicionamiento y repites elementos. Si te decides, sería bueno darle un repaso a todo el codigo y dejarlo mucho más bonito y funcional.

Saludos.

27 de Mayo 2004 a las 09:48 PM #
9. Publicado por Jabalí:

Lo que pasa es que estoy, por así decirlo "en bragas" con el asunto del diseño web. Llevo tan sólo unos meses con ello y cada día descubro cosas nuevas. Trabajo con plantillas prediseñadas que voy cambiando cuando averiguo para que sirve tal o cual comando. Es un mundo apasionante del que soy un auténtico novato, pero cada día, como con los consejos que me habeis dado aprendo algo nuevo. Poco a poco comienzo a entender para que sirven los estándares y por qúe los que sabeis del tema le dais tanta importancia a la limpieza del código. Una tarde que tenga libre me pondré a fondo y, en la medida de mis posibilidades, intentaré limpiarlo un poco. Gracias.

27 de Mayo 2004 a las 10:16 PM #
10. Publicado por Juanki:

Este comentario va también para el resto de colaboradores-diseñadores. En una palabra:
Simplifica.

Me explico: Cuanto más compliques tu diseño más probabilidades hay de que algún grupo de visitantes tenga problemas para acceder a los contenidos, que son lo importante. Tus textos son muy buenos, así que no necesitas adornos innecesarios.

Como además dices que llevas poco tiempo diseñando, mejor que mejor para que aprendas a hacer las cosas bien. Pásate por http://www.useit.com
Eso te ayudará a no caer en el típico error del diseñador seminovato-semiexperto: demostrar en su web todas las virguerías técnico-visuales que sabe hacer, y que distraen o dificultan el acceso al contenido.

Por ejemplo, el tamaño del texto lo marcas en px (pixels) en lugar de pt (puntos). Es decir, tamaño fijo frente a relativo. Si quiero ver tus textos más grandes para leerte mejor no puedo agrandar la letra. ¿Realmente tú quieres que por narices la letra se vea con ese y sólo ese tamaño?.

El diseño debe estar al servicio del contenido, no al revés.
Ánimo monstruo.

28 de Mayo 2004 a las 02:15 PM #
11. Publicado por Jabalí:

Es muy cierto eso que comentas del tamaño del texto. Intentaré arreglarlo.

28 de Mayo 2004 a las 08:20 PM #
12. Publicado por LaParcela:

Jabali, para el tema de diseño web y todas esas cosas si te interesa aprender mas cosas o exponer distintas dudas te propongo el uso de los Grupos de Noticias (google tiene uno, entras en google y le das a grupos) el grupo sobre webs esta en la raiz es.comp.infosistemas.www.paginas-web (directamente desde google http://groups.google.es/groups?hl=es&lr=&ie=UTF-8&group=es.comp.infosistemas.www.paginas-web enga que te vaya bien con la programacion ;)

29 de Mayo 2004 a las 07:42 PM #
13. Publicado por Jabalí:

Gracias, le echaré un ojo.

29 de Mayo 2004 a las 07:59 PM #
14. Publicado por montse:

tengo un problema cuando estoy usando el internet exploret se me bloquea mucho y me sale about black si alguien sabe como solucionarlo porque no se ni lo que es gracias de antemano

21 de Abril 2007 a las 03:50 PM #
15. Publicado por Covi:

Aunque hace siglos de esta entrada... y es posible que algunas consideraciones hayan cambiado ^^

Yo le diría que un gran número de expertos en Diseño Web (entre ellos Zeldman) recomiendan de todo menos pt para las unidades del texto. Diseñar en pt es, antetodo, para una representación impresa lo cual en algunas web puede tener algo de lógico pero no en la mayoría.

Pt es demasiado relativo y aleatorio si quieres definir un estilo... si no es así: ggg, no diseñes una web, distribuye tus contenidos en RSS y que cada uno le aplique el formato en el software que quiera, no? xD ... seamos algo de lógicos hombre.

Si además no estuvieramos tan mal acostumbrados a IE y las políticas M$... los píxeles no deberían ser un problema de restricción. El W3C siempre recomendó navegadores accesibles que dieran al usuario la posibilidad de cambiar el tamaño de fuente... de hecho la mayoría lo hacen... excepto IE6- claro.

Y sobretodo... em está más indicado que pt, aunque es otra locura.

En resumen, como dice Zeldman: "Los píxeles demuestran que los píxeles funcionan".
Un píxel es un píxel -con muy poca diferencia a lo sumo- en MAC, Linux, Win... Fx, IE, Opera, Safari, Konq, Ephi, el resto de unidades lo dicho, quedan tan lejos de nuestro control. Si no te interesa que tu sitio se vea como quieras pues lo dicho, distribuye solo contenido :D ya el resto es algo ilógico ;)

PD:#14 vivan los hoygan! xDD

20 de Agosto 2007 a las 08:53 PM #

Publica tu propio comentario si lo deseas

  • Por favor, intenta que tu comentario guarde relación con el asunto tratado en el artículo. El autor no se hace responsable de las opiniones ajenas vertidas en esta sección.