IE rarezas

Hola buenas a todos.

Primero me presento. Soy profesor de nuevas tecnologías (uff que no es nada) en La Escuela de Arte de Logroño. Estoy inmerso en la realización de un website para la propia escuela (hasta ahora era una página "super-accesible" en flash y el reto es mantener una versión xhtml+css y encima acesible (hasta donde me llegue el tiempo).

El caso es que intento hacerla entera con CSS sin ningún hack para explorer (hasta el moento queda bastante digna en IE 6 y IE 7)pero de repente me encontre con una "chapuza". Para mas señas os doy el web de enlace (que es totalmete provisional... esta corregido pero lo dejo un tiempo para que me deis opiniones). (creo que tengo el modo html desactivado asi que a copy-paste toca la sigueinte url). Por cierto, está testado en Firefox, Opera, Safari, Netscape, Camino, Mozilla en Windows 2000, XP, OsX y Linux con varias versiones y todo va bien... salvo el consabido IE todoterrenoestandarquetepasas.

http://www.easd-design.com/easd_xhtml/easd_01/easd_estudios.html

El caso es que todas las secciones (menu de la derecha) están basadas en la misma plantilla de definición xhtml, y solo en esta se va de parranda el contenido a los espacios oscuros inferiores.

Tras testar todo tipo de historias con las css (anchuras de tablas, etc) ya que esta sección es la única que lleva <table> por doquier, y sospechar que era problema de las tablas.

Pues va y resulta que no, tras poner y quitar de todo para ver cual era el problema en IE 6 (e intentar resolverlo sin hacks) pues di con el truquillo. Y os va dar la risa... seguro.

El caso es que una convinación no adecuada (según IE 6) de elementos <em> (para enfatizar el texto que el <i> y el <b> supuestamente están "deprecados" en algunos de los parrafos hace que IE se vaya de parranda. Tras muchos intentos de corregirlo es una combinación "exquisita" la que le asusta y lo manda todo al orificio inferior. De verdad que he testado los susodichos <em> y todo funciona adecuadamente.

Vamos que si un elemento de "inline" le hace ver "bloques" mas anchos o vaya usted a saber que... esto no hay forma humana de resolverlo con hacks (o al menos no voy ni ha intentarlo.

No es ya cuestión de compatibilidad con los estandares, esto es un bug-arron en toda regla.

Un saludo.
Félix.

PD: Gracias a todo por vuestras aportaciones, es reconfortante aprender muchas cosas en este foro y no meter demasiado la pata.

No me ha quedado claro este párrafo, ¿cual era el problema?

Hola, y porque no te deshaces de los elementos <b> e <i>, y lo haces todo por hojas de estilo, en cuento a incompatibilidades, si eres nuevo usuario de Clab, tienes que por norma, obligacion, y dogma de fe usar comentarios condicionales para evitar que tu disenio se rompa en exploiter y evitar y/o alejarte de los hacks

saludos

Max escribió:

Pues va a ser que me tendreís que bannear del foro, mientras pueda permitirmelo no pienso utilizar los hack (me encomiendo a todos los santos para conseuguirlo sin hack ni javascript) y la razón de momento es falta de timepo por un lado y que el material me valga para dar clase a mis alumnos a los que un simple gotoandplay() les vuelve locos (dales un frehand y son felices). Vamos que me declaro abiertamente de diseño zen (minimalista o el minimo común problema, que para maximizar problemas ya esta la informática), para más inri no dispongo de instalaciones windows suficientes para los test (si, lo has adivinado trabajamos bajo Mac oSX) y no tenfo ganas de complicarme más aún. Bueno, vaya rollo, y todo para no ser baneado inmediatamente.

Por otro lado como veo que no ha quedado claro el problema resumiré:
- No uso <i> ni <b> ni ninguna notación que no sea xTHML 1.0 transicional (esos _blank aún me molan mientras me dejen).
- La página solo usa <strong> u <em> para enfatizar los textos (podría usar <span> pero me parece igual de potente y un poco más caro).
- Todo esta maquetado con CSS y testado en diversos navegadores.
- El IE6 hace cosas raras en el enlace que puse ( http://www.easd-design.com/easd_xhtml/easd_01/easd_estudios.html ).
- Si testaís cualquier otro de los menús de la derecha la columna central se visualiza correctamente. Solo en este caso IE la renderiza completamente abajo (como si no tubiese sitio o las dimensiones no fueran correctas).
- Algo raro debe existir en el código xHTML pues la CSS es la misma en todos los casos y el contenido es homogeneo en su estructura (Listas, etiquetaho H1..6 y tablas).
- Finalmente encontre que es precisamente al cortar un texto resaltado con <em>, y digo cortado porque al ajustarlo IE dentro de su box pues le toca dejar un trozo de texto en una línea y otro en otra línea, digamos que <em>esto es el texto resaltado</em> lo debe partir en dos líneas diferentes del mismo parrafo <p>. Y ese es el problema, si quito ese <em> o lo sustituyo por varios a modo de <em>esto</em><em> es </em><em> un</em> ... etc pues parece que funciona bien. Lo cual es un poco de locos, depende como pille el em pues funciona o no funciona. El texto está justificado a derecha-izquierda o justificación completa.

Espero que quede más claro y para testarlo pues podeís visitar la url que os doy arriba. Yo he sido el primer sorprendido al resolver el problema (me esperaba cualquier cosa relaccionada con anchuras, mínimos o tamaños pero no un triste <em> .. en fin).

Un saludo.