Bug padding avec google chrome et IE

Fermé
Lyc@n Messages postés 221 Date d'inscription dimanche 24 octobre 2010 Statut Membre Dernière intervention 22 février 2014 - 7 janv. 2013 à 23:44
 Profil bloqué - 8 avril 2013 à 20:15
Bonjour tout le monde,
Je suis débutant en css et je commence à créer mon site, donc voilà, dans la barre de navigation, quand on survole un lien, une ligne bleu ce forme en dessous, comme ceci:
http://data.imagup.com/member2/1172262003_Sans titre.png
Sous Firefox ça affiche bien comme vous pouvez le voir, mais sous IE et google chrome, ça ce décale et ça donne ceci:
http://data.imagup.com/member2/1172262120_Sans titre.png
Comme vous le voyez la barre bleu est plus haute que sous Firefox, pourtant ma fiche de style ne semble pas poser de problème:
{
	width: 900px;
	height:50px;
	margin: auto;
	margin-bottom: 0px;
	border: 1px transparent solid;
	background-color: #393939;
	box-shadow: 6px 6px 6px rgba(0,0,0, 0.5)
}
nav ul
{
	list-style-type: none;
	padding: auto;
	color: white;
}
nav li
{
	display: inline-block;
    margin-right: 15px;
}
nav a
{
	font-size: 15px;
	font-family: OpenSansRegular;
	color: #C8C8C8;
	padding-bottom: 10px;
	text-decoration: none;
}
nav a:hover
{
	color: white;
	border-bottom: 3px #00E6FF solid;
	
	text-shadow: 0px 0px 6px rgba(255,255,255, 1)
}


Et voilà le code HTML de la barre de navigation:
			
<nav>
	<ul>				
		<li><a href="Index.html" >Home</a></li>

		<li><a href="Downloads.html" >Downloads</a></li>

		<li><a href="Projects.html" >Projects</a></li>

		<li><a href="#" >Forum</a></li>

		<li><a href="About.html" >About</a></li>
	</ul>
</nav>


Quelqu'un pourrait il m'aider s'il vous plait? Merci!




A voir également:

3 réponses

Profil bloqué
27 mars 2013 à 15:14
Salut,

En fait, dans ton code, tu ne soulignes pas ton lien au survol, tu lui fais afficher sa bordure inférieure (faut imaginer qu'il est dans une petite boite).

Donc soit tu supprimes ce border-bottom: 3px #00E6FF solid; et tu mets à la place text-decoration:underline;

soit tu définis une hauteur dans ton nav : height:hauteurpx; display:block;
0
Lyc@n Messages postés 221 Date d'inscription dimanche 24 octobre 2010 Statut Membre Dernière intervention 22 février 2014 14
8 avril 2013 à 20:12
Merci pour la réponse, et oui je fait bien apparaitre la bordure inférieure et je ne souligne pas, c'est juste que je me suis mal exprimé, désolé! Je vais donc tenter de donner une hauteur à mon nav, merci beaucoup pour la réponse!
0
Profil bloqué
8 avril 2013 à 20:15
De rien !
0