CSS: largeur d'un lien ne change pas en définissant l'attribut largeur

Question

J'ai cette construction:

<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; 
} 

Taille de l'image est 445px (mais était 620px). Tous les autres liens comme celui-ci ont la taille 620px.

Dans l'IE tout fonctionne très bien et le lien est de 445px de taille. Mais dans Firefox et Chrome, le lien est toujours de 620 pixels. Le div a la bonne taille de 445px.

Que faire? La balise <a> doit avoir la taille de 445px.

Chose intéressante, le lien ne dépasse pas la taille de 445px, mais est cliquable jusqu'à la taille de 620px.

vôtre Joern.

Answer 1

Alors <a> tag est un élément en ligne. Par conséquent, sa largeur est déterminée par la longueur du texte dans la balise. Pour résoudre ce problème, vous pouvez ajouter display:block; à votre classe .media_link et il fonctionnera comme prévu.

Answer 2

Vous devez float: left ou display: block ou (idéalement) display: inline-block sur le a:

.media_link { 
    display: inline-block 
} 

---

Votre utilisation de class="media_link" deux fois et #media_link est source de confusion. L'utilisation d'un <br /> n'est pas nécessaire - vous pouvez le remplacer par display: block.

Je recommande de changer à ceci: 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

Votre code HTML est actuellement invalide et vous devez mettre l'ancre <a> à l'intérieur du <div> plutôt que l'inverse. Une fois que vous avez votre code HTML dans le bon sens, vous pouvez définir votre ancre sur display:block et la dimensionner comme requis.