IMG dentro de A no es botón en IE7

ebestudio · #1 (**permalink**) 02/06/2012, 11:47

Hola gente, soy nuevo y espero poder ayudar asi como tambien lo hacen todos ustedes. Mi problema es con el IE7... este es mi código:

<a class="link-blindado" href="#">
<img src="images/autoblindado.png" alt=""/>
Título
Texto descriptivo
</a>

Bueno... el código está validado y logro lo que quiero en IE8 y 9, Firefox, Chrome, Safari... pero no en IE7. La imagen aparece, pero no toma las propiedades del botón, o sea, cuando posiciono el mouse sobre ella, aparece el cursor "default" sin heredar el href del elemento "a".

Espero haber sido claro y que me puedan ayudar!!
Gracias!.

Naahuel · #2 (**permalink**) 02/06/2012, 12:54

¿Eso está validado? ¿Bajo qué Doctype? Antes de HTML5, no se puede usar elementos de bloque dentro de elementos inline, particularmente los <a>. O sea, básicamente, no es "válido" poner un dentro de un <a> en tu caso.

No sé cómo será el estilo que querés, pero probablmente haciendo que el .link-blindado sea de bloque (display:block) y por las dudas haciendo explícito el cursor:pointer lo solucione

ebestudio · #3 (**permalink**) 02/06/2012, 17:51

Hola Naahuel, gracias por responder!

El doctype es este: <!DOCTYPE html>

Está validado por HTML5, probé de poner lo que me aconsejaste pero no funciona... si bien el {cursor:pointer;} simula estar parado sobre un link, éste sigue sin heredar el href de .link-blindado en IE7, pero sí funciona en los antes mencionados. Con el texto me funciona bien... qué debo estar haciendo mal?

caricatos · #4 (**permalink**) 02/06/2012, 18:50

Hola:

No sé cuál es el problema... href="#" es un enlace al tope de la página... y lo del class no tiene que ver con html sino con estilos...

¿No será un vicio de librerías javascript...?

Saludos

ebestudio · #5 (**permalink**) 02/06/2012, 20:37

Hola Caritatos, gracias por contestar!

El href="#" siempre lo pongo así, ya que cuando termino la maqueta me dedico a los enlaces. Los archivos 'js' los comenté todos y sigue todo igual, o sea que problemas de 'js' no es. Qué puedo estar haciendo mal? o mejor dicho... de qué otra forma puedo lograr lo que no me sale?

ebestudio · #6 (**permalink**) 03/06/2012, 19:40

Help!

emprear · #7 (**permalink**) 04/06/2012, 00:07

Cita:

Iniciado por ebestudio

Hola gente, soy nuevo y espero poder ayudar asi como tambien lo hacen todos ustedes. Mi problema es con el IE7... este es mi código:

<a class="link-blindado" href="#">
<img src="images/autoblindado.png" alt=""/>
Título
Texto descriptivo
</a>

Bueno... el código está validado y logro lo que quiero en IE8 y 9, Firefox, Chrome, Safari... pero no en IE7. La imagen aparece, pero no toma las propiedades del botón, o sea, cuando posiciono el mouse sobre ella, aparece el cursor "default" sin heredar el href del elemento "a".

Espero haber sido claro y que me puedan ayudar!!
Gracias!.

lamentablemente uno de los defecto de HTML5, es que dá esa estructura como válida, la permisividad con que trata el html, es a mi juicio una involución, bueno, pero es un detalle nomás.
Te cuento, al menos en IE9 visto con el motor de IE7 en las herramientas de desarrollo, la mano del cursor aparece en los tres casos, la imagen, el primer párrafo y el segundo, ahora, en cuanto pasas de un elemento al otro, el cursor pasa a ser default, tanto por el break que crean naturalmente los como por los margenes por defecto que conllevan, ahora, si todos los elementos forman parte del mismo link? cual es el objeto de esos dos párrafos? lo más adecuado sería poner

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
</head>
<body>
<a class="link-blindado" href="#">
 <span class="blindado"><img src="cargando.gif" alt=""/></span><br />
 <span class="titb">Título</span><br />
 <span class="sbtb">Texto descriptivo</span>
 </a>
</body>
</html>

De esta nmanera vas a conseguir un bloque más compacto y semánticamente apropiado
Y como recurso extra , te quedan las clases para formatear con el css

SAludos

ebestudio · #8 (**permalink**) 04/06/2012, 10:39

Entiendo, pero no creo que sea involucionar, sabiendo que la lógica del código es correcta (varios elementos forman un único botón). Dentro del <a>, al que contiene la imagen le saqué la propiedad float:left; y funciona correctamente en todos los navegadores, pero me dificulta posicionar el texto al costado de la imagen, ya que ni con float ni con position logré que herede el href de <a>. no se si se entiende... pero es bastante raro, al menos para mí.

emprear · #9 (**permalink**) 04/06/2012, 11:07

Reafirmo lo dicho, Si esto no validase
<a>


</a>
como no lo hacía en xhtml, no se produciría la desaparición del cursor: pointer y el href del <a> entre y , eso de ninguna forma es un bloque que conforme un botón único. Substituyendo el por si, como ya te lo demostré
Por lo otro hubiese sido oportuno que hablases del posicionamiento de la imagen respecto del texto en tu post original, porque es un tema completamente diferente.
Finalmente cualquier consideración sobre manipulación via css, es irrelevante, ya que en ningún momento exponés el mismo.

ebestudio · #10 (**permalink**) 04/06/2012, 15:41

Emprear, antes que nada quiero agradecerte las respuestas y el tiempo que dedicaste a mis dudas, desde ya agradecido!

Como aclaro en el primer post del tema, soy nuevo por aquí y seguramente todavía no se la forma de situarlos de lleno en mi problema... de a poco voy a ir encontrando una mejor forma de hacer mis preguntas para que se puedan entender mejor y no generar 'dudas' que sin querer aparecen.

Aclaro nuevamente que el código HTML valida perfectamente en HTML5.
Lo que rescato de todo este rollo es que dentro de un elemento <a> se puede usar elementos como y y que formen parte del elemento <a>, heredando sus atributos como href="#". Bien, pero eso no sirve para el IE7... lo que hay que hacer para que funcione en todos o la gran mayoría de los navegadores más comunes, es no aplicarle ni FLOAT ni POSITION a los elementos dentro de <a>, de esa forma se comporta como un bloque.

Espero que les pueda servir a otros que se topen con este inconveniente, y no sientan que involucionan en la forma de resolver sus inconvenientes, ya el hecho de proponer una forma desconocida/errónea/rara y buscar ayuda en este foro, es síntoma de querer evolucionar.

Saludos, y gracias por la ayuda!

ebestudio · #11 (**permalink**) 07/06/2012, 21:09

Estoy feliz!

A www.vimeo.com le acabo de encontrar una "Involución".

<a href="/43338103" data-id="43338103">

<img src="http://b.vimeocdn.com/ts/300/879/300879879_150.jpg" alt="" class="thumbnail thumbnail_med_wide">
<div class="data">
A Walk in Nature
by NotWorkingFilms
</div>
</a>