Página validada, se ve bien en IE6, mal en IE8 (FF, Opera sin problemas)

[RBZ]

Como el IE6 es el navegador más problemático pero aún lo usan muchos usuarios no lo he desintalado, supuse que si se veía bien la web en IE6, en Firefox y Opera, se vería también en las versiones posteriores de Internet Explorer... pues no es así.

No tengo ni idea de lo que pasa, la web tiene un menú en css en la parte superior. Sólo en IE8, el H1 lo trata como si fuera un enlace al índice de la web.

En esta captura de pantalla que me han pasado se ve el H1 como un enlace (tengo definido por CSS que los enlaces visitados aparezcan de color gris).



El enlace a la página de la captura: http://fotografias-sevilla.com/iglesia-santa-marina.php

Aunque a Microsoft eso le importa poco, la página valida. ¿Qué puede pasar?

[Mikmoro]

Buenas. Me resulta muy extraño que te valide, porque tienes todos los LI sin cerrar:

<li><a href="mapa-sevilla.php" title="Conoce la situaci&oacute;n de los lugares destacados de Sevilla, con enlace a sus fotos" ><strong>Mapa tur&iacute;stico del centro hist&oacute;rico</strong></a>
<li><a href="http://fotografias-sevilla.com/catedral/" title="La Catedral de Sevilla" >La Catedral</a>
<li><a href="http://fotografias-sevilla.com/catedral/fachada-oeste.php" title="La Fachada Oeste de la Catedral" >La Catedral, fachada oeste</a>

Será cosa del transicional.
Yo antes de mirar otras cosas miraría que todo esté correctamente cerrado, y luego ya se verá lo del h1 (que es posible que se arregle).

Por otr lado en la css:

.menu ul li a, .menu ul li a:visited {
background:#DFC184 none repeat scroll 0% 50%;
border-color:#FFFFFF;
border-style:solid;
border-width:1px 1px 0pt 0pt;
color:#000000;
display:block;
height:3em;
line-height:3em;
padding-left:10px;
text-decoration:none;
width:320px;
}

El visitado aparece como negro.

[RBZ]

Las etiquetas li no las cierro porque en el transicional no hay que cerrarlas, ¿me equivoco?

El visitado del menú aparece en negro, pero en el general de la web no:

a:visited {text-decoration:none;
color:#666666;}

Es bastante extraño porque el "title" que aparece es el mismo que tengo puesto en los enlaces superiores del menú (situa el ratón encima de "La Sevilla turística" por ejemplo), sin embargo, el enlace usa el color definido para el resto de la web.

[kseso?]

Hola RBZ
Incidiendo en lo observado por Mik, te comento a mayores:

Premisa: ie8 emulado con ietester.
¿Te has fijado que el área sensible en el enlace superior ("fiestas y extras") llega hasta el h1?.

Bueno, creo que es debido a que el enlace

Código html:

<li><a href="http://fotografias-sevilla.com/" title="Index de fotograf&iacute;as de Sevilla, Espa&ntilde;a">Fiestas y extras
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
 

lo cierras para ie7 en esa línea y al terminar la tabla vuelves a cerrar otro enlace para ie6 e ie7.
si añades otro comentario condicional para ie8 cerrando un enlace, esos efectos desaparecen. H1 ya no estará dentro de ningún enlace a los ojos de ie8.
Te debería quedar así:

</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
<!--[if lte IE 6]>
</a>
<![endif]-->
<!--[if IE 8]>
</a>
<![endif]-->
</div>
<h1>Iglesia g&oacute;tico-mud&eacute;jar de Santa Marina de Sevilla</h1>

No me he parado a verificar porqué, simplemente así es.

Pero considero que esta es una solución "chapuza". Sería más "profesional" y sin riesgos de posibles problemas derivados que realices ese menú bien, en cuanto a sintaxis del html (el css no lo miré).
Aparte de los conocidos menús de Mikmoro, posíblemente también conozcas la página www.cssplay.co.uk
Seguro que en cualquiera de los dos sitios vas a encontrar algo que se adecue a tus necesidades.

Un saludo

[Mikmoro]

Iniciado por RBZ

Las etiquetas li no las cierro porque en el transicional no hay que cerrarlas, ¿me equivoco?

Sí, te equivocas

No, la cosa es que no es lo mismo ni parecido el "podrían no cerrarse", con "no hay que cerrarlas", es decir, que sepa interpretarlo no quiere decir que no haya que cerrarlas, que hay que hacerlo siempre siempre, sino que transicional permite no hacerlo, pero en letra pequeña, vendrá un: "aunque será fuente segura de problemas".

Cierra siempre todas las etiquetas, que es obligatorio en todo XHTML, y sencillamente evitará posibles complicaciones relacionadas con eso. Y por otro lado, no hacerlo no aporta absolutamente nada (como lo haría por ejemplo no usar DOCTYPE de cara a los IE's).

Por último, y como decía sin profundizar, no entiendo muy bien cómo estás usando los cometarios condicinales para IE7, ya que en general, para un desplegable sólo CSS no los debería necesitar (al contrario que IE6).

Lo de los visited no lo he entendido, pero hay cosas previas más interesantes

[RBZ]

Gracias por la sugerencia kseso?, casualmente el menú es una versión simplificada de uno de www.cssplay.co.uk. A lo mejor hace falta readaptarlo porque lo tengo hace tiempo... aunque leyendo el mensaje de Mikmoro sobre los condicionales e IE7 creo que mejor haré el menú de nuevo (es más fácil que revisar cada paso).

[kseso?]

De nada.
Pero mientras, para evitar los efectos indeseados sobre h1, basta con que añadas el cc para ie8 que te resalto en negrita. Al menos desaparecen en el ie8 emulado con ietester.

Un saludo

[RBZ]

Sí, si gracias, lo tengo en cuenta, ya lo he añadido... bueno a la mitad de las páginas se me olvidó que uso 2 includes para el menú.

[Mikmoro]

Iniciado por RBZ

casualmente el menú es una versión simplificada de uno de www.cssplay.co.uk. A lo mejor hace falta readaptarlo porque lo tengo hace tiempo...

Efectivamente. He de decirte que los comentarios para IE7 en los menús de CSSPlay son sólo un asunto de una validación antigua de un parser de Microsoft (y sólo para M$), de manera que realmente sobran por completo.

Como supongo que además estás usando algún script para que te funcionen en IE6 (no lo he mirado bien), coge uno de los sugeridos por kseso? y creo que no te costará casi nada adaptarlo y que todo vaya bien.

Saludos.

[RBZ]

Ya está, he adaptado uno de tus magníficos ejempos de menú mikmoro.

Ahora surgen nuevos problemillas para IE6. ¿z-index no funciona en IE6?, hay alguna solución aunque sea algo chapucera.

[Mikmoro]

Sí, si funciona el z-index, pero no por ejemplo para cambiarlo en eventos (aumentar el z-index al pasar el ratón [:hover] no va en IE6, por ejemplo).

¿Cuál es exactamnete el problema (y el código final usado)?

[RBZ]

El problema es para un menú con un mapa. Bueno son dos modelos diferentes distintos pero creo que se podría usar la misma solución. Para Firefox lo he solucionado de la forma más simple, con un z-index mayor que el del mapa pero al ponerlo en la tabla para IE6 (el estilo table.falsa) no funciona.
El CSS del menú está en esta url, los cambios son principalmente de tamaños y colores.

Código:

http://fotografias-sevilla.com/menu.css

Las páginas con los mapas son:

http://fotografias-sevilla.com/mapa-sevilla.php

http://fotografias-sevilla.com/noreste.php

El CSS de los mapas está en la propia página.


Una duda extra, en otra página tenía una lista de definición, esas en las que tienes varios niveles, desde que he puesto el mapa ya no respeta los niveles, los iguala, la solución chapuza que se me ha ocurrido es usar text-indent para separarlas... La página en que tengo las listas es: http://fotografias-sevilla.com/monum...lla-museos.php (sólo las dos primeras listas están cerrados los li)


(Off topic) Mikel puedo enlazar a tu sitio o prefieres mantenerla "reservada" (Off topic)

[kseso?]

añade a #menu:

position: relative;
z-index: 1000}

Te adjunto captura (en ietester):

La razón (Mik te la explicaría mejor) es que ie6 necesita que el z-index lo tome el padre. Tiene mucho respeto paternal y un hijo no puede sobresalir por arriba de su padre.
Sobre la listas de definición:
La sintaxis que tienes es:

<dd>Horarios
<dl>
<dd>Martes 14:30 a 20:30</dd>

<dd>Mi&eacute;rcoles a s&aacute;bado 9 a 20:30</dd>
<dd>Domingo 9 a 14:30</dd>
<dd>Lunes cerrado</dd>
</dl>
</dd>
<dd>Tarifas

Cuando debería ser:

Código html:

<h1> Monumentos de Sevilla</h1>
<h2> Información de turismo. Horarios</h2>
<h3> Museos</h3><!-- por ejemplo como encabezado los hnº -->
<ul>
  <li>Museo de Bellas Artes de Sevilla</li>
   <dl>
    <dt>Horarios:</dt>
          <dd>Martes 14:30 a 20:30</dd>
          <dd>Miércoles a sábado 9 a 20:30</dd>
          <dd>Domingo 9 a 14:30</dd>
    <dt>Tarifas:</dt>
          <dd>Gratuito ciudadanos de la Unión Europea</dd>
          <dd>Resto de países 1,50 €</dd>
    <dt>Situación:</dt>
          <dd>Plaza del Museo 9</dd>
          <dd>Teléfono: 954 78 65 00</dd>
   </dl>
  </li>
  <li>Museo Arqueológico de Sevilla</li>
   <dl>
    <dt>Horarios:</dt>
--
--
--
   </dl>
  </li>
</ul>
<h3> Monumentos</h3>
<ul>
     <li>Real Alcázar de Sevilla</li>
       <dl>
           <dt>Horarios:</dt>
            <dd>....</dd>
<!-- etcétera.. -->
 

Por ejemplo. Esa sería una anidación de listas. Y crearías otra para los Monumentos.
O podrías optar por colocar todo en la misma lista (ul), con sólo dos 'li' de primer nivel: Museos y Monumentos, y anidar otra dentro de cada uno de esos dos 'li'.
Creo que eso ya va en gustos y en que te manejes mejor o peor con más o menos anidamientos.

Un saludo

[Mikmoro]

Tanto la explicación como la solución de Maese kseso?, perfectísimamente; es cuestión de respeto familiar y herencia del padre en este caso. No lo he probado pero estoy seguro de que funciona bien.

Iniciado por RBZ

(Off topic) Mikel puedo enlazar a tu sitio o prefieres mantenerla "reservada" (Off topic)

Puedes enlazarla si quieres, no hay problema (vamos, que hagas lo que te apetezca tranquilamente).

<Off topic>Te estás currando la paginita de tu pueblo, ¿no?</Off topic>

[kseso?]

Iniciado por Mikmoro

Tanto la explicación como la solución de Maese kseso?, perfectísimamente; es cuestión de respeto familiar y herencia del padre en este caso. No lo he probado pero estoy seguro de que funciona bien.

Todo un placer leer eso, pero no deberías fiarte ni de tu sombra

Iniciado por Mikmoro

<Off topic>Te estás currando la paginita de tu pueblo, ¿no?</Off topic>

<offcourse> Cuando vi el fondo de la página me acordé de:

</offcourse>

pa'cer publi de tu "pueblo"

[RBZ]

Muchas gracias, comprobado que queda perfecto. Es curioso el comportamiento del IE6, todo el mundo dice que es un hijo de pxxx y él tiene un gran respeto paternal.
La sintaxis de las listas la corregiré mañana (cuando esté más despierto). Volveré a preguntar porque tengo una duda sobre lo que has puesto que antes quiero comprobar (no vaya a ser una burrada).


Sobre el off topic, está currada sí, es una "cruzada" personal quiero demostrar que aparte del tópico de la gracia, Sevilla tiene un rico patrimonio histórico-cultural... Nah, es una suma de aficiones fotografía, Sevilla (arte, historia...) y también es atractivo el diseño web y el SEO.

@Mikmoro ¿Tienes algún logo para la página?

[Mikmoro]

Mi mujer estuvo en marzo o así unos días en Sevilla y vino enamorada de los Reales Alcázares, de la catedral, etc. Así que en cuanto sea posible me llevará arrastras

Iniciado por RBZ

@Mikmoro ¿Tienes algún logo para la página?

No, no tengo, pero te puedes inventar uno

[RBZ]

@kseso? sería correcto añadir un nivel extra, por ejemplo:

Código html:

<h1> Monumentos de Sevilla</h1>
<h2> Información de turismo. Horarios</h2>
<h3> Museos</h3><!-- por ejemplo como encabezado los hnº -->
<ul>
  <li>Museo de Bellas Artes de Sevilla</li>
   <dl>
    <dt>Horarios:</dt>
          <dl>
         <dt>verano</dt><!-- nivel extra-->
          <dd>Martes 14:30 a 20:30</dd>
          <dd>Miércoles a sábado 9 a 20:30</dd>
          <dd>Domingo 9 a 14:30</dd>
           </dl>
         <dt>vinvierno</dt><!-- nivel extra-->
           <dl>
          <dd>Martes 14:30 a 20:30</dd>
          <dd>Miércoles a sábado 9 a 20:30</dd>
          <dd>Domingo 9 a 14:30</dd>
          </dl>
      </dl>
    <dt>Tarifas:</dt>
          <dd>Gratuito ciudadanos de la Unión Europea</dd>
          <dd>Resto de países 1,50 €</dd>
    <dt>Situación:</dt>
          <dd>Plaza del Museo 9</dd>
          <dd>Teléfono: 954 78 65 00</dd>
   </dl>
  </li>
 

@Mikmoro ¿Arrastras?, ya estás diciendo que Sevilla es la más fermosa ciudad sobre la tierra o... menudo esaborio que estas hecho.
Mejor te enlazo como texto porque no soy bueno haciendo logos.

[Mikmoro]

Yo ya he estado en Sevilla varias veces, mayormente trabajando, y me gusta más por tu enfoque que por el oficial-popular. Sobre todo que si voy por vacaciones no habrá que obligarme mucho . Eso sí, de abril a noviembre ni tocar, que no me gusta sentir que llevo encima de la cabeza un "gratinador"

Volviendo al "ontopic", yo no usaría listas de definición para eso, sino simples listas desordenadas UL LI anidadas. Lo digo porque un UL es una lista de elementos sin más, y una lista de definición es para definir términos mayormente.
Tampoco creo que las lsitas de definición deban usarse para anidar o añadir niveles de prfundidad, porque de hecho no lo hacen.

[Mikmoro]

No obstante, si quieres que al menos ese código valide, debe estar bien anidado:

<ul>
<li>Museo de Bellas Artes de Sevilla</li>
<li>
<dl>
<dt>Horarios:</dt>
<dd>
<dl>
<dt>verano</dt><!-- nivel extra-->
<dd>Martes 14:30 a 20:30</dd>
<dd>Miércoles a sábado 9 a 20:30</dd>
<dd>Domingo 9 a 14:30</dd>
</dl>
</dd>
<dt>vinvierno</dt><!-- nivel extra-->
<dd>
<dl>
<dd>Martes 14:30 a 20:30</dd>
<dd>Miércoles a sábado 9 a 20:30</dd>
<dd>Domingo 9 a 14:30</dd>
</dl>
</dd>
<dt>Tarifas:</dt>
<dd>Gratuito ciudadanos de la Unión Europea</dd>
<dd>Resto de países 1,50 €</dd>
<dt>Situación:</dt>
<dd>Plaza del Museo 9</dd>
<dd>Teléfono: 954 78 65 00</dd>
</dl>
</li>
</ul>

[kseso?]

Bien.
Hay quien está de suerte y podrá elegir
Reconozco que tengo pendiente el tema de las listas de definición con Mik, desde al menos Enero y la competencia de css.
Creo que discrepamos un poco en lo que entendemos por una definición. Pero bueno, ya habrá ocasión propicia

Aquí como yo lo haría he hecho:
www.css.devillasbuenas.es/listas-enredadas.html
Dos por el precio de una

<medioOffcourse>
mi alusión al fondo de la página y el vídeo no era referida a bolantes, lunares, faralaes y demás tópicos...
Iba por el tema de la luz de Sevilla, la claridad de su cielo y la alegría la hospitalidad de sus gentes y su carácter extrovertido. Virtudes que no asocio con esos tonos "tierra".
</medioOffcourse>

Un saludo

[Mikmoro]

Sé que discrepo contigo y con más gente en ese aspecto, y aunque sé que será en privado, por no dejar huérfano de argumentación al interesado espectador que haya llegado hasta este punto del hilo, sólo diré apoyado en la RAE:

definición.

(Del lat. definitĭo, -ōnis).

1. f. Acción y efecto de definir.

2. f. Proposición que expone con claridad y exactitud los caracteres genéricos y diferenciales de algo material o inmaterial.

3. f. Decisión o determinación de una duda, pleito o contienda, por autoridad legítima. Las definiciones del Concilio, del Papa.

4. f. Declaración de cada uno de los vocablos, locuciones y frases que contiene un diccionario.

5. f. Nitidez con que se perciben los detalles de una imagen observada mediante instrumentos ópticos, o bien de la formada sobre una película fotográfica o pantalla de televisión.

6. f. pl. En las órdenes militares, excepto la de Santiago, conjunto de estatutos y ordenanzas que sirven para su gobierno.

Elige la que encaja con la "definición" de los días de la semana de su lista

P.D.: en cualquier caso, repito que creo que semánticamente no están pensadas para ser anidadas, aunque puedan serlo.

[RBZ]

@Mikmoro, cómo lo harías entonces, añadiendo un text-indent, la idea es que esos datos se vean de un vistazo, que no aparezcan todos apelmazados. Mira el ejemplo de @Kseso? es mucho más cómodo de leer que todos los datos a un mismo nivel.

@kseso? Gracias, creo que no voy a poder usarlo porque hay algo que choca con los estilos del menú... http://fotografias-sevilla.com/listas-reliadas.php

Iniciado por kseso?

(...)

<medioOffcourse>
mi alusión al fondo de la página y el vídeo no era referida a bolantes, lunares, faralaes y demás tópicos...
Iba por el tema de la luz de Sevilla, la claridad de su cielo y la alegría la hospitalidad de sus gentes y su carácter extrovertido. Virtudes que no asocio con esos tonos "tierra".
</medioOffcourse>

Aja, ya entiendo por dónde ibas... Pensaba poner el color del albero (muy típico), sin que quedara muy amarillo, pero como soy medio daltónico (no es un chiste, es literal), usé el primer color de fondo que no "influenciaba" a las fotografías.


Por cierto, gracias a los dos, no os doy Karma que aún no puedo.

[Mikmoro]

Sí, supongo que usaría text-indent o bien margin-left, que es en realidad lo que tiene por defecto un dd.

Y voy a coincidir seguro con kseso?: gracias a ti por abrir un hilo que nos permita divertirnos un poco

[kseso?]

Eskarrikasco, txapeldum.

La cuestión (o mejor, mi confusión) posiblemente venga de que "to define ~definition~" también significa "dejar claro el esquema o la forma" y que aparte de poder traducir "definition list" como "lista de definición", lo hice inconsciente (y seguramente también de forma errónea) como "lista de descripción, de detalles" o sus sinónimos.

Y casualidades, en inglés y español, algunos de los sinónimos para "define" coinciden con definir: "describe, detail, enumerate" ( explicación, exposición, descripción, aclaración).

Pero que conste, que he tenido que buscar y seleccionar la información para llevar el agua a mi molino

Un saludo

Edito:

Iniciado por Mikmoro

Y voy a coincidir seguro con kseso?: gracias a ti por abrir un hilo que nos permita divertirnos un poco

Cómo lo sabes!!
Así nos sacudimos la desmotivación de tantos "¿cómo centro al centro?" y similares

[RBZ]

Las referencias al inglés son para confundir a Mik y llevarte el gato al agua... o al molino el agua

[kseso?]

Hola Rafael:

@kseso? Gracias, creo que no voy a poder usarlo porque hay algo que choca con los estilos del menú... http://fotografias-sevilla.com/listas-reliadas.php

Eso es fácil de evitar: especificidad
Yo, en el colmo de la originalidad, metí cada lista en una caja que llamé ".caja"
Bien, pues sólo tienes que anteponer a todos las declaraciones que yo utilicé relativas a las listas esa clase: ".caja", y así evitas conflictos:
.caja ul li, .caja dl dt {...}
.caja ul li ul li dl dt {...}
etc

Sólo como información, no como evangelización

Al molino. Porque es más grato y probable toparte con la molinera si oficias de aguador entre molinos que de aguafiestas entre gatos

Un saludo

[Mikmoro]

Iniciado por RBZ

Las referencias al inglés son para confundir a Mik y llevarte el gato al agua... o al molino el agua

Lo tengo clarísimo

Iniciado por kseso?

Al molino. Porque es más grato y probable toparte con la molinera si oficias de aguador entre molinos que de aguafiestas entre gatos

Ingenioso retorcimiento

Y sí, la especificidad es muy útil siempre, y en general garantía para evitar confusiones. Es siempre mejor para el creador, el lector de código, los navegadores, etc.

[RBZ]

La cantidad de problemas que me habría ahorrado teniendo claro este concepto. Pensaba que las especificaciones sólo afectaban al div referido y las generales a todos los que no tuvieran unas específicas... tomo nota, las que no se especifican afectan a tódios.

Un post muy instructivo, además de útil.

[kseso?]

Bueno, Rafael, ya sabrás que en el 99% de las veces, el 99% del mérito de una buena respuesta lo tiene quien hizo una buena pregunta (también válido si cambias buena por mala )

Así que la molinera, su gato y el que lleva el agua p'al molino, quedan esperando la siguiente maquila

Un placer.