Imagen y texto dentro de la etiqueta <a>

Este es el html asp.net generado (con algunos detalles de identificación del cliente eliminados)

En Windows XP/IE 7, hacer clic en la imagen no hace nada. Al hacer clic en el texto se ejecuta el hipervínculo. Hacer clic derecho en cualquier lugar y luego seleccionar open in new windowo opentambién funciona.

En otros navegadores, todo funciona como se esperaba.

¿Hay algo simple que alguien pueda ver que pueda hacer para que funcione correctamente en IE7?

<div id="hdrXXX">                      
            <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
                 <div style="float:left;display: block;"> 
                    <img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
                </div>
                <div style="float:left; display: block; padding:15px 0 0 0;"> 
                    <span id="XXX">Some text right here</span>

                </div>
            </a>  
       </div>

Aug 31 '11 23:08 Adam Rackis

Sólo puedes colocar elementos a nivel de bloque dentro de elementos de anclaje con HTML5 y la compatibilidad con el navegador aún es un poco dudosa. Obviamente, IE7 no admite esto.

No necesitas usar división para hacer esto:

<div id="hdrXXX">                      
    <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
        <img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" /> 
        <span id="XXX">Some text right here</span>
    </a>  
</div>

Esto debería funcionar con el mismo efecto...

Aug 31 '2011 16:08 animuson

Intente eliminar los divs, ya que la etiqueta img y el intervalo se muestran naturalmente en línea. Agregue un bloque de visualización, flote hacia la izquierda si necesita márgenes directos a las etiquetas, como se supone que agrega divs. Además, a la etiqueta de anclaje, agregue overflow:hidden (si usa flotantes), para que ocupe el espacio total de los dos elementos secundarios.

Aug 31 '2011 16:08 agmcleod

Debido a tus flotadores, el ancla se derrumba. Además, no puedes colocar elementos a nivel de bloque <div/>dentro de elementos en línea <a/>.

Siguiendo con el código que no es W3C que tienes allí, necesitarás borrar tus flotantes con este código justo antes del cierre.</a>

<div style="clear: both"></div>

Probablemente querrás crear una clase llamada .cleary mover los estilos a ella. Aquí hay un ejemplo de mi sitio:

.clear-fix {
clear: both !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}

Una mejor manera de hacer que su código sea compatible con W3C es la siguiente:

<div id="hdrXXX">                      
    <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
        <span style="float:left;display: block;"> 
            <img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
        </span>
        <span style="float:left; display: block; padding:15px 0 0 0;"> 
            <span id="XXX">Some text right here</span>
        </span>
        <span class="clear-fix"></span>
    </a>  
</div>

Aug 31 '2011 17:08