Dimension de div non respectée par Firefox

**Zelphalya** · 05/01/2007, 04h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Kerod** · 05/01/2007, 05h56

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

**Auteur** · 05/01/2007, 10h57

bonjour,

encadrer un div d'une balise a

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
<!--
.styleOver{
 color: #0000FF;
 text-decoration: underline;
 cursor: pointer;
}
.styleOut{
 color: #000000;
 text-decoration: none;
 cursor: default;
}
//-->
</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>

**Bisûnûrs** · 05/01/2007, 11h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="monDiv"><a href="monlien">Texte</a></div>

**clb56** · 05/01/2007, 13h15

Salut,

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

Dimension de div non respectée par Firefox

Dimensionnement en CSS

Discussions similaires

Partager

Partager