28221 sujets

CSS et mise en forme, CSS3

Bonjour j ai un souci au niveau de la ffichage d une liste dans ie et firefox ..
biensur il y a des difference ...
J ai lu le post de hoPHP "IE et display: block [peut aider]"
mais je n ai pas reussi a me depatouiller ?.?.
voila ce qui apparait dans ie puis ensuite dans Firefox.
upload/1007-ie.gif
upload/1007-firfox.gif
Voici le code :
ul,li {
list-style-type: none; 
margin: 0;
padding: 0;
border:0;
line-height: 15px;
display: inline; 
}
#menu { /*conteneur pour le menu */
border: 0;
margin-top: 0px;
margin-left: 13px;
width: 196px;
height: 46px;
border: 1px solid #DBDBDB;
background-color: #FFFFFF;
font-family: verdana, arial;
text-align: center;
padding: 0;
}
.menu a li {
margin: 0;
padding: 0;
border: 0;
width:100%;
display: block;
}
.menu a {
font-size: 10px;font-weight: bold;
color: #ED851F;
     margin:0px;
     width: 196px; 
     height: 14px;
     display: block;
     text-align: center;
     border: 0;
	 padding: 0px;
     text-decoration: none;
     background: #FFFFFF;
     }	
.menu a:hover {
    background: #F8F6F2;	
     }
.menu a:active {
     background: #ECECEC;
     }

Vous y comprenez quelque chose ??
pourquoi cette difference de hauteur ??

Je vous remercie pour votre aide,

bonne journée,
sam.
Merci a tous les deux ...en fait cela venait donc de cette histoire de div et class au niveau du menu ..j ai remis tout en div car en fait c etait les memes ..
De plus j ai enlevé le height dans le conteneur ...
merci de votre aide !!
Sam.
Modifié par masprod (22 Feb 2005 - 13:09)
Tu peux te contenter d'une unique id sur ul comme suit:

*{
  margin:0;
  padding:0;
}
ul#menu { /*ul est déjà un conteneur pour les li*/
margin-left: 13px;
width: 196px;
border: 1px solid #DBDBDB;
background-color: #FFFFFF;
font-family: verdana, arial;
text-align: center;
}
ul#menu li{
  list-style:none;
  height: 14px;
  line-height:14px;                                                                         font-size:10px;
}
ul#menu li a{
  display: block;
  width: 196px;
  height: 14px;
  font-weight: bold;
  color: #ED851F;
  background: #FFFFFF;
  text-decoration: none;
}
ul#menu li a:hover{
   background: #F8F6F2;
}
ul#menu li a:active{
   background: #ECECEC;
}

qui donne un résultat identique sur IE et Firefox.