CSS: anchura de un enlace no cambiar estableciendo el atributo de anchura

Question

tengo esta construcción:

<a onclick="toggle_media_box(); return false;" href="#" class="media_link"> 
    <div id="media_link" class="media_link"></div> 
</a><br /> 

#media_link { 
    background-image: url("/images/media.png"); 
} 

.media_link { 
    width: 445px; 
    height: 200px; 
} 

Tamaño de la imagen es 445px (pero estaba 620px). Todos los demás enlaces como este tienen el tamaño 620px.

En el IE todo funciona bien y el enlace es 445px de tamaño. Pero en Firefox y Chrome el enlace aún tiene 620 píxeles de ancho. El div tiene el tamaño correcto de 445px.

¿Qué hacer? La etiqueta <a> debe tener el tamaño de 445px.

Lo interesante es que el enlace se desplaza hasta el tamaño de 445px, pero se puede hacer clic hasta el tamaño de 620px.

Yours Joern.

Answer 1

Luego la etiqueta <a> es un elemento en línea. Por lo tanto, su ancho está determinado por la longitud del texto dentro de la etiqueta. Para solucionarlo, puede agregar display:block; a su clase .media_link y funcionará como se esperaba.

Answer 2

Usted necesita float: left o display: block o (idealmente) display: inline-block en el a:

.media_link { 
    display: inline-block 
} 

---

Su uso de class="media_link" dos veces y #media_link es confuso. No es necesario usar un <br />; puede reemplazarlo con display: block.

Yo recomiendo cambiar a esto: http://jsfiddle.net/Yg4YN/2/

<a onclick="toggle_media_box(); return false;" href="#" class="media_link"> 
    <span class="media_span"></span> 
</a> 

.media_link, .media_span { 
    display: block; 
    width: 445px; 
    height: 200px; 
} 
.media_span { 
    background-image: url("/images/media.png"); 
} 

Answer 3

El código HTML está actualmente válido y debe colocar el ancla <a> dentro del <div> en lugar de al revés.

Una vez que haya recibido su HTML correctamente, puede establecer su ancla en display:block y dimensionarla según sea necesario.