Enlazar con un div completo

[Jowy]

Hola gente, que tal andamos? Me asalta una duda... en la cabecera de una web tengo un div tal que así:

Código:

 <a href='index.html'><div class="logo"></div></a>

El div tiene una imagen de fondo que es el logo de la web... al hacer click en él debería llevarme al index.

Bien, funciona en firefox. En IE7 funciona pero no aparece el cursor en forma de mano... y en IE6 no funciona nada de nada... ¿Que puedo hacer para que en IE me funcione correctamente? ¿Se os ocurre alguna otra forma de conseguirlo?

[Raulmmmm]

Poner todo el CSS del logo al <a>, y luego añadirle el display:block;. Ejemplo:
.logo{ width: 300px; height: 400px; background: url('logo.gif'); display: block;}
Y el html:
<a href="index.html" class="logo"></a>

[Jowy]

Gracias! en IE7 ya funciona perfecto! Pero en IE6 ni se ha inmutado...

:(

[Raulmmmm]

Intenta borrar la caché y vuelve a probar, a mí me va en IE6, y si sigue sin ir, pon aquí el código del .logo.

[Jowy]

Vale, esta bien como tu habías dicho. He comprobado que funciona, pero como uso un fix para preservar la transparencias de los .png:

Código:

img, div, a { behavior: url(js/iepngfix.htc) }

entonces se ve que interactua de alguna manera y no me detecta el enlace...

Creo que voy a tener que usar otro fix para transparencias de png... :(

[feral]

<a href='index.html'><div class="logo"></div></a>
Los div son elementos de bloque en (x)html y no pueden ir dentro de los <a>, que son elementos en linea. Eso es un fallo grave sintactico que te puede dar problemas en el CSS y en el DOM a parte de una validacion negativa del codigo (x)html.
Usa una etiqueta <span> en vez del div, y luego si quieres le das un comportamiento block al span en el CSS (block e inline en CSS no son lo mismo que en (x)html), en CSS todo elemento puede ser block o inline (posicionalmente) pero en xhtml no, por defecto tienen el mismo comportamiento que en xhtml pero se puede cambiar.

Por ejemplo <span> es un elemento en linea de (x)html, y siempre sera en linea en el (x)html, por lo tanto se puede colocar dentro de otro elemento en linea como <a>. Sin embargo en CSS span puede mostrarse en linea o en bloque, por defecto sera mostrado en linea (como en (x)html) pero se puede cambiar.

En cuanto a tu problema si lo he entendido bien quieres poder hacer clic en una imagen de fondo a modo de enlace.. lo que no se es como has conseguido hacer eso en algun navegador ya que las imagenes de fondo CSS no son interactivas, para que una imagen pueda ser clickeada es necesario que este puesta mediante <img> en el codigo fuente del (x)html. Creo que debe estar relacionado con el fallo del codigo que has puesto que de alguna manera extraña activa tu div como si fuera un enlace en algunos navegadores.

Quizas la manera mas sencilla de hacer lo que tu quieres si he entendido bien lo que quieres hacer seria;
<div>
<a href="#"><img src="#" alt="logo" /></a>
</div>

Tambien como te han dicho antes podrias aplicar a la etiqueta <a> todo el CSS, pero un logo en mi opinion sobrepasa en significado a un elemento decorativo (imagenes de fondo), por lo tanto es mas adecuado usar img en el codigo (x) html para mostrarlo.