[CSS] Menu décaler sous FF

Block et float

Sujet résolu

1 mars 2006 à 10:26:21

Salut à tous,
J'ai un léger problème sous FF avec un menu
Comme vous pouvez le voir ici : http://www.grunk.be/cv lorsque le nom contenu dans le block est trop long ou alors que je fixe une largeur de block trop longue , le menu dépasse du cadre...
Alors que sous IE aucun problème , le menu est bien placé et le surlignage de couleur prend bien toutes la largeur.
Je suppose que le problème vient de l'interprétation différente de display:block; mais je ne ait pas comment résoudre le problème.
Si vous avez une idée :

HTML :

<div id="global">
<div id="header">
</div>
<div id="contenu">
<h1>Page de contenu</h1>
<p> </p>
</div>
<div id="menu">
<h1>Menu</h1>
<div id="contenumenu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu12222222222222222</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
</ul>
</div>
</div>
<div id="footer">
</div>
</div>

CSS : ( extrait pour le full voir http://www.grunk.be/cv/style.css )

#menu
{
float: right;
width: 161px;
padding-left:5px;
padding-right:10px;
padding-top:10px;
text-align:right;
}
#contenumenu
{
clear:both;
}
#footer
{
width: 603px;
height: 1px;
clear:both;
}

#contenumenu ul
{
list-style-type: none;
margin:0;
}
#contenumenu li
{
display: inline; /* Astuce pour eviter décalage sous IE*/
}

#contenumenu a
{
color:#666666;
width: 100%;
display:block;
font-weight:bold;
text-decoration:none;

}
#contenumenu a:hover
{
background-color:#5FA255;
}

jp949

1 mars 2006 à 11:49:24

#contenumenu ul
{
list-style-type: none;
margin:0;
padding:0;
}
avec ca tu gagneras deja 40px

grunk

1 mars 2006 à 12:43:18

Yes bien jouer pour le padding c'était bie ca

Encore une fois merci à toi

jp949

1 mars 2006 à 12:44:23

c gratos

JulFisher

1 mars 2006 à 13:18:31

Explications :

Sous IE, un margin-left est définie par défaut pour les listes à puces, alors que sous FF, il s'agit d'un padding-left. Le problème vient de ces valeurs par défauts que chaque navigateur met à sa guise.

http://julfisher.free.fr/aides_xhtml_css/css.html#espace_marge

grunk

1 mars 2006 à 16:19:02

Merci de l'infos je savais pas que c'était différents pour les deux