Dimension de div non respectée par Firefox

Version imprimable

Je veux mettre une image sur la droite, qui change lorsque l'on est dessus, avec un lien.

Sous IE j'ai pas de problème, le résultat est ok. Par contre sur Firefox, mon image est à gauche et le lien est sur toute la largeur de la page comme si la largeur de mon div était ignorée.

Voici le code html
Code:

1 2 3 4 5 6 <div class="commentaire"> Commentaires sur Le Forum ici <a href="../forum/viewtopic.php?t=236"> <div id="img-forum" onMouseOver="javascript: id='img-forum_up';" onMouseOut="javascript: id='img-forum';"></div> </a> </div>
Et le code dans mon fichier css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 .commentaire { Text-Align: right; Font-Size: 10pt; Font-Family: Verdana,Arial,Helvetica,sans-serif; Font-Weight: bold; Color:#FFCC99; Margin: 10px; } #img-forum { Width: 70px; Height: 70px; Cursor: pointer; Background-image:url("images/forum.jpg"); Background-position: center center; Background-repeat: no-repeat; } #img-forum_up { Width: 70px; Height: 70px; Cursor: pointer; Background-image:url("images/forum_up.jpg"); Background-position: center center; Background-repeat: no-repeat; }
Je n'ai malheureusement rien trouvé qui me donne au moins une piste de recherche pour comprendre ce comportement :(

05/01/2007, 05h56
Kerod

La balise <a> prend sous FF toute la dimension de son parent, ici c'est le div de classe commentaire. Sa taille est fixe par les margin donc oui c'est normal qu'il prenne toute la page.

Si tu veux, tu peux invertir l'ordre <a><div></div></a> et mettre <div><a></a></div>

En mettant le width et le height du <a> à 100% pour qu'il prenne toute la largeur/hauteur du div

bonjour,

encadrer un div d'une balise a 8O

Citation:

Envoyé par Kerod

Si tu veux, tu peux invertir l'ordre <a><div></div></a> et mettre <div><a></a></div>

C'est ce qu'il y a de mieux à faire

Citation:

Envoyé par Kerod

En mettant le width et le height du <a> à 100% pour qu'il prenne toute la largeur/hauteur du div

Ca ne marchera pas avec tous les navigateurs. Les dimensions du lien dépend du contenu, on ne peut pas fixer les dimensions de ce genre de balise.

Le mieux est d'utiliser les scripts:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html> <head> <title></title> <style type="text/css">  </style> </head> <body> <div class="styleOut" onclick="document.location.href='page.htm'" onmouseover="this.className='styleOver'" onmouseout="this.className='styleOut'"> bla bla bla bla </div> </body> </html>

05/01/2007, 11h23
Bisûnûrs
Citation:

Envoyé par Auteur

Ca ne marchera pas avec tous les navigateurs. Les dimensions du lien dépend du contenu, on ne peut pas fixer les dimensions de ce genre de balise.

Sauf si on passe la balise <a> en block :
Code:

1 2 3 4 5 6 7 8 9 10 #monDiv{ width:200px; height:100px; background:red; } #monDiv a{ display:block; width:100%; height:100%; }
Code:

<div id="monDiv"><a href="monlien">Texte</a></div>
05/01/2007, 13h15
clb56

Salut,

Citation:

Envoyé par Bisûnûrs

Sauf si on passe la balise <a> en block :

+1

Sachant que dans ce cas le width:100%; n'est plus utile car <a> aura la largeur par défaut du comportement block soit width:auto; = toute la largeur disponible du parent.

C'est non seulement non utile mais fortement déconseillé en raison du fonctionnement du modèle de boite standard :
Si d'aventure on mettait un border-left de 5 px à <a> alors celui ci aurait une largeur de 100% + 5px