Probleme affichage UL LI menu sur opera et firefox.

28 déc. 2008, 11:22

Salut,
Voila mon code css :

#menu_haut {
	width:850px;
	height:20px;
    background-color: #3A3A3A;
	margin-left:auto;
	margin-right:auto;
    border-left: solid #01A9C6 4px;
    border-right: solid #01A9C6 4px;
	border-bottom: solid #01A9C6 4px;
	border-top: solid #01A9C6 3px;
}
#menu_haut ul {
    padding: auto;
    color: #FFF;
    line-height: 20px;
    white-space: nowrap;
	text-align: center;
	padding-bottom: 10px;
}
#menu_haut li {
    list-style-type: none;
    display: inline;
	float: left;	
}
#menu_haut a {
	width:141.7px;
	height:20px;
    font-family: "Comic sans ms";
	background-color:#3A3A3A;
	color:#FFF;
	text-decoration:none;
	display:block;
	text-align: center;
    line-height: 20px;
}
#menu_haut a:hover {
	width:141.7px;
	height:20px;
	color:#000;
	text-decoration:underline;
	background-color: #01D7FB;
	display:block;
	text-align: center;	
    line-height: 20px;
}

HTML :

Code : Tout sélectionner

	<ul id="menu_haut">
			<li><a href="index.php">Accueil</a></li>
			<li><a href="index.php?page=dl">Downloads</a></li>
			<li><a href="index.php?page=list_serv">Nos serveurs</a></li>
			<li><a href="index.php?page=tutos">Le&ccedil;ons</a></li>
			<li><a href="index.php?page=team">La team</a></li>
			<li><a href="index.php?page=pub">Pub</a></li>
	</ul>

Or voilà ce que ça fait :
Mince, inversé firefox et opéra sur l'image =), c'est opéra qui me laisse du gris a droite.

Donc j'ai l'impression que Opéra affiche le tout en plus petit et ne respecte pas les tailles des blocks.
J'ai d'abord pensé que c'était un problème de taille de texte mais en fait nan pas du tout.

Merci !

28 déc. 2008, 13:12

Hey

,

Comme ça, en lisant ton code en diagonale, je penserais à une interprétation différente des arrondis dans Presto et Gecko (d'ailleurs, on dit Opera et pas Opéra).
Tu utilises des pixels flottants : 141.7px. Essaye d'arriver à des entiers pour voir (142px par exemple).

Édition : au passage, remet les marges et les pas des balises <li> à 0 (une sorte de reset local).

28 déc. 2008, 16:18

Merci pour ta réponse, en mettant 142px ça fonctionne =) mais faut que je change aussi width a 852px sinon il me saute une ligne.

Comment mettre a 0 les marges ??

28 déc. 2008, 16:20

Comment mettre a 0 les marges ??

C'est très simple.

Code : Tout sélectionner

ul, li {
  margin: 0; /* Pour les marges extérieures */
  padding: 0; /* Pour les marges intérieures */
}

28 déc. 2008, 16:29

ok merci, c'est bien ce que j'avais fait

ça fonctionne maintenant, merci =)

28 déc. 2008, 23:11

Alors un petit résolu ? Comme je le pressentais dans ton précédent sujet c'était donc bien un problème de code/css

28 déc. 2008, 23:52

Modération :
the_grinch, si ta question est résolue, pense à ajouter le tag [Résolu]
pour indiquer aux personnes qui voudront consulter ce sujet qu'il contient une solution.
Tu peux réaliser cette opération en cliquant sur le bouton

en haut à gauche de ce sujet.

Probleme affichage UL LI menu sur opera et firefox.

Qui est en ligne