28172 sujets

CSS et mise en forme, CSS3

Problème de padding-top sur IE6 [Résolu]

Bonjour à tous,

J'ai un souci avec un menu horizontal en css. Lorsque j'applique un padding-top et un padding-bottom dans le a du menu ul li celui ci n'est pas pris en compte sous ie6 et ie5. Il est bien pris en compte sous ie7 et FF3.

Voudriez vous bien m'aider à trouver la solution ?

#menuhaut{
	position:absolute;
	right:10px;
	top: 86px;
}
ul#menu{
	margin: 0;
	padding: 0;
	font-weight:bold;
	font-size: 1.1em;
	font-family:sans-serif;
	list-style-type: none;
}
#menu li{
	display: inline;
}
#menu a{
	background-color: #401e02;
	color:#ff3300;
	line-height: 1.1em;
	padding: 5px 19px 5px 19px;
	margin-left:5px;
}
#menu a:hover, #menu a:focus{
	color:orange;
	text-decoration:none;
}


et pour le html :

<div id="menuhaut">
	  <ul id="menu">
     <li><a href="" title="Nous contacter">Nous contacter</a></li>
		 <li><a href="" title="Circuits">Circuits</a></li>
     <li><a href="" title="Le véhicule">Le véhicule</a></li>
     <li><a href="" title="Votre guide">Votre guide</a></li>
    </ul>
   </div>

Modifié par sylvainmart (09 Apr 2009 - 19:24)
Bonjour,

Tu utilises une feuille de styles spéciale dédicace à IE6 ? Si oui, as-tu vérifié que le padding n'est pas écrasé (par un Reset ou autre) ?

Une page en ligne à proposer ? Smiley cligne
Merci Belig pour ta réponse.

Le padding n'est pas écrasé par un reset.

En fait ma question est : comment faire prendre en compte par ie6 ou ie5 le padding-top et le padding-bottom avec les ul et li ?

J'ai le doctype suivant :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Est ce pour cela que j'ai un problème avec ces navigateurs (ie6 et ie5) ?
Salut,

Tu devrais essayer de mettre les padding, les margin et le background sur le li plutôt que le a.
Après test, ce qui semble poser problème est le positionnement absolu de #menuhaut. Pour obtenir le même comportement des paddings sur FF et IE6, il faut remettre cette <div> dans le flux.

Je te propose donc plusieurs solutions :
- (Si c'est possible,) tu vires le positionnement absolu de #menuhaut et tu t'arranges pour positionner cette <div> avec des margin, ou alors,
- tu gardes le positionnement absolu, tu crées une feuille de styles spéciale IE6 (via commentaires conditionnels) et tu ajoutes le même padding que tes liens (en hauteur et en largeur) à #menuhaut + un ajustement de la valeur top, ou alors,
- tu fais comme te l'a suggéré Agylus, tu mets les paddings et le background sur les <li> plutôt que sur les <a>.

Il y a une dernière technique (<li> flottants, liens en display:block et largeurs fixées), mais trop compliquée et pas adaptée dans ton cas.

Bon courage. Smiley smile
Modifié par BeliG (08 Apr 2009 - 15:07)
Je vous remercie bien.

Je modifie le code et vous tiens informé du résultat.

Encore merci pour votre aide.
Voilà le problème est résolu. J'ai mis les padding dans le li plutot que dans le a, j'ai mis #menuhaut en position relative et j'ai englobé le tout dans une div containermenuhaut qui elle est en position absolute. Avec cette pirouette on voit la même chose sur ie5, ie6, ie7 et FF3

Merci encore pour votre précieuse aide, je ne m'en serais pas sorti tout seul.

Le code modifié :

Html :

<div id="containerhaut">
	  <div id="menuhaut">
	   <ul id="menu">
      <li><a href="" title="Nous contacter">Nous contacter</a></li>
		  <li><a href="" title="Circuits">Circuits</a></li>
      <li><a href="" title="Le véhicule">Le véhicule</a></li>
      <li><a href="" title="Votre guide">Votre guide</a></li>
     </ul>
    </div>
	 </div>


Et le css :

#containerhaut{
	position: absolute;
	right:10px;
	top: 86px;
}
#menuhaut{
	position:relative;
}
ul#menu{
	margin: 0;
	padding: 0;
	font-weight:bold;
	font-size: 1.1em;
	font-family:sans-serif;
	list-style-type: none;
}
#menu li{
	display: inline;
	background-color: #401e02;
	padding: 10px 19px 10px 19px;
	margin-left:30px;
}
#menu a{
	color:#ff3300;
	/*
	background-color: #401e02;
	padding: 10px 19px 10px 19px;
	margin-left:5px;*/
}
#menu a:hover, #menu a:focus{
	color:orange;
	text-decoration:none;
}

Modifié par sylvainmart (09 Apr 2009 - 19:21)
Sujet clos
Aller à