28173 sujets

CSS et mise en forme, CSS3

A:hover avec une image sur du texte rendu différent sous Firefox et IE

Bonjour,

mon problème est dans le titre :

ce qui donne en image :
upload/9144-pourquoi.gif ou voir mon site

je souhaiterais que le rendu soit celui de IE7 sous Opera et Firefox.

voici mon code css pour la partie qui me tracasse :

a.nav {
   color: #DDEBFB;
   text-decoration: none;
}
a.nav :visited {
   color: #DDEBFB;
   text-decoration: none;
} 
a.nav:hover {
   position:relative;
   left:-8px;
   padding-left:8px;
   color: #406ca5;
   text-decoration: none;
   width:130px;
   background-image: url(../Boutons/fond/fond.gif) ;
} 

.menu
{position:absolute;
top : 142px;
left:10px;
color:#DDEBFB;
line-height:25px;
font-size: 10pt; 
font-family: Arial,Verdana, serif;
text-align:left;
font-weight:bold;}


et comment est appelé tout cela dans ma page web : 

<div class="menu">
	<font size=3 color="#ffffd3">NAVIGATION</font><br>	
		<a class="nav" href="index.htm">Accueil</a><br>
		<a class="nav"  href="Pages_HTML/Moi.htm">Qui-suis-je ?</a><br>
		<a class="nav"  href="Pages_HTML/Ressources.htm">Ressources</a><br>
		<a class="nav"  href="Pages_HTML/Logiciels.htm">Logiciels</a><br>
		<a  class="nav" href="Pages_HTML/Liens.htm">Liens</a><br><br>
	<font size=3 color="#ffffd3">RESSOURCES</font><br>
		<a class="nav" href="Pages_HTML/Maths.htm">Mathématiques</a><br>
		<a class="nav"  href="Pages_HTML/Physique.htm">Physique</a><br>
		<a class="nav"  href="Pages_HTML/Chimie.htm">Chimie</a>
</div>


A noter que ce que j'obtiens sous ie7 (ce que je veux pour les autres navigateurs) ne fonctionnent plus dès que je mets un DOCTYPE dans mon code source.

Espérant trouvé de l'aide, je vous remercie d'avance.
Smiley smile
Smiley fache Merci de m'avoir répondu aussi vite.

J'avais effectivement déjà tester le display:block;

le problème de largeur était effectivement réglé mais cela ajoutait une ligne vierge dans mon menu au passage de la souris et générait une image en hover trop large sous firefox :

upload/9144-block.gif

et je ne vois pas comment remédier à ce décalage vers le bas.
Coucou !

Maintenant que ton lien est un bloc, ce dernier possède des marges.
As-tu essayé de les modifier ? Smiley murf
Je pense que cela devrait régler ton problème Smiley ravi
Administrateur
dad97 a écrit :
Le smiley en en-tête de mon précédent message n'était pas souhaité

Hello,

Ce n'est pas gênant, n'hésite pas à utiliser le bouton "éditer" (en haut à droite du message) pour le modifier Smiley cligne
Autant pour moi je m'étais trompé. Ce n'est pas sur a:hover quil fallait mettre display:block, mais sur a tout court.
a.nav {
   display:block;
   color: #DDEBFB;
   text-decoration: none;
   width:130px;height:20px;
   padding:0px;margin:0px 0px -20px 0px;
   position:relative;

}

Modifié par Ralfman68 (25 Oct 2006 - 19:22)
Je vous remercie tous de vos précieux conseils Smiley biggrin .

Cela fonctionne comme je le souhaitais. Smiley biggrin

Merci et bonne soirée Smiley smile
Sujet clos
Aller à