[SOLUCIONADO] display:inline vs display:block

[Gelito]

Hola a todos.

Os cuento un problema que me ha tenido 2 dias desesperado, y aunque lo he solucionado, no acabo de entender el porqué.

Genero una página con Cabecera, Cuerpo y Pie.
En el cuerpo cargo 4 DIV con display:none, de forma que desde unos enlaces en la cabecera su muestre uno y se oculte el resto a través de una función javascript que establece style.display='inline' al que se desea ver y style.display='none' a los que se quieren ocultar.

Esta página ha estado un año funcionado y de repente me encuentro que dejan de funcionar enlaces dentro los DIV.
Enlaces como éste:
<a title="Ver la partida" href="javascript:MostrarPartida(5844)">Nombre del jugador</a>

De hecho, al pasar el cursor por encima del enlace no indica que sea un link.

Pues bien, después de 2 dias de desesperación se me ocurre cambiar el style.display='inline' por style.display='block', y funciona!

Pongo este comentario con dos objetivos: por si puede evitar que alguien pase por esta desagradable experiencia y por si alguien conoce el motivo.
Me molesta sobremanera arreglar algo sin entender las causas y el porqué de la solución.
Porqué funcionaba antes? Porqué ha dejado de funcionar? Qué tiene el inline para obviar un enlace?

Saludos.

[pzin]

Sin ver el código es complicado poder decir algo acertado.

Pero por opinar… Tal vez debido a ser un elemento en linea se comportara de forma extraña y quedara por debajo de otras cosas. Cosa que igual no se hubiera visto, pero si hay algo encima de un enlace, no podrás pinchar encima de es enlace.

[GeekGirl]

Hay muchas diferencias entre los elementos de línea y los de bloque en cuanto a la manera de ocupar el espacio en la página.

Podrías poner el código para ver un poco mejor lo que explicas? Es muy difícil adivinar sólo con descripciones.

[Gelito]

Gracias por responder.
No he puesto código porque es extenso y debería poner HTML, CSS, javascript...

Si os sirve os doy acceso a la página.

Entrad en http://garnatagolf.com/APP_GarnataGolf.php
Es una página de golf....

Os dirá que no estáis identificados. Iniciad sesión con:
usuario: [email protected]
Contraseña: Prueba

Os muestra la página (diseñada para ver en telefono móvil) con la cabecera, el cuerpo y el pie.
Aparece visible el div "Pag00", que hace referencia a la ultima partida jugada.
Tras la corrección, sí identifica el texto "Usuario prueba" como un link.

Si entrais con las herramientas de Desarrollador de cualquier navegador (yo uso firefox y Chrome) y seleccionais el div Pag00, podeis ver y modificar las caracterisicas CSS.

Buscad el display:block y cambiadlo por display:inline.
El texto "Usuario prueba" deja de estar activo.

He comprobado que usando display:inline-block también funciona...

Saludos.

[pzin]

A mí no me ocurre eso problema. Probé con Chrome 40.0.2214.111 (64-bit) en Mac.

[Gelito]

pzin, si lo ejecutas ahora funciona bien porque está cambiado a display:block.
No sé si has simulado cómo actúa con display:inline.

Ya tengo 40.0.2214.111 para Windows y me falla con inline.

No quisiera hacer de esto un mundo y molestaros para nada ya que actualmente funciona, pero es que no entender el porqué de las cosas siempre me ha molestado y a mis años ya es casi una manía....

Gracias por la atención que me prestais.
Saludos.

[GeekGirl]

Tiene razón, si se toca a mano el display: block; de el div Pag00, el link deja de comportarse como tal. Haciendo algunas pruebas pude ver que el problema no está asociado al display: inline sino a una combinación de ese display: inline; y el posicionamiento relativo que también tiene el div.

Si eliminas el position: relative; y le ponés display: inline;, el link sí funciona correctamente.

Estuve buscando en Google y evidentemente hay problemas cuando se combinan estas dos cosas.
Aún no encuentro cuál es el problema específicamente.

De todas maneras, te recomiendo usar siempre display: block; o en su defecto display: inline-block; para no tener este tipo de problemas. Pensá que el div originalmente es un elemento de bloque que se muestra como tal, y vos lo estás ocultando y volviendo a mostrar como un elemento de línea. Como contenedor y teniendo position: relative;, me imagino que al dejar de mostrarse como un elemento de bloque, se debe joder algún tema en el display de los elementos.

Saludos

[Gelito]

Gracias por la explicación, GeeGirl.
Saludos.