[Résolu] Problème avec "Haut de page" sous IE ET FF

Bonjour à tous,

j'ai un souci pour dimensionner un <a> positionner en bas à droite un <div> contenu servant de liens vers le haut de page...
avec ce code :

<div id="contenu">

du contenu
du contenu
etc ...

<a id="top-page" href="#page" title="Afficher le haut de cette page Internet">Haut de page</a>

</div>

avec

a#top-page:link, a#top-page:visited {
	float: right;
	height: 15px;
	margin-top: 20px;
	color: #3A7E1C;
	text-decoration: none;
	font-size: 15px;
	padding-right: 20px;
	background: url(/images/haut-de-page.gif) no-repeat top right;
}
a#top-page:hover, a#top-page:active {
	color: #3A7E1C;
	text-decoration: underline;
	background: url(/images/haut-de-page.gif) no-repeat bottom right;
}

haut-de-page.gif est une image contenant l'état rollout/rollover (dessus/dessus)

Mon problème est double...

sous Firefox, le margin-top: 20px; altère la zone réactive... ! C'est à dire, qu'au lieu d'avoir toute la surface du <a> + img (callée à droite), il n'y a plus qu'une ligne (équivalent du border-top du <a>)

sous IE, je n'arrive pas à avoir une vraie hauteur de 15px (environ 18/19px), ce qui provoque un affichage partiel des 2 états de mon image haut-de-page.gif. c'est bof bof...

Auriez-vous une idée ?
Merci d'avance

Modifié par Tchupacabra (23 Feb 2007 - 17:36)

Tu as essayé "display: block;" ?

Maxime.

oui, ça ne change rien...

je l'ai enlevé car y a la propriété float qui... si je m'en rappelle bien, fait passer l'élément à block...

Comme ceci ça devrait aller mieux :

a#top-page{
	float: right;
	height: 15px;
	margin-top: 20px;
	color: #3A7E1C;
	text-decoration: none;
	font-size: 15px;
	padding-right: 20px;
	background: url(/images/haut-de-page.gif) no-repeat top right;
}

a#top-page:hover, a#top-page:active{
	color: #3A7E1C;
	text-decoration: underline;
	background: url(/images/haut-de-page.gif) no-repeat bottom right;
}

malheureusement non.

Tu peux nous montrer la page ?

Concernant la hauteur, à mon avis il faut ajouter un line-height:15px, sinon le font-size étant à 15px la boite sera forcement de la hauteur du line-height sous IE même en spécifiant un height:15px

<div id="contenu">

du contenu
du contenu
etc ...

<a id="top-page" href="#page" title="Afficher le haut de cette page Internet">Haut de page</a>

<div style="clear: both;"></div>

</div>

en rajoutant <div style="clear: both;"></div>, je n'ai plus de problème de zone réactive sous FF
Bizarre non ?

et en rajoutant line-height:15px; le problème sous IE6 est également résolu !!!!

Merci à vous 2 et spécialement à MrPatate pour l'astuce...
@+
Modifié par Tchupacabra (23 Feb 2007 - 17:36)