28221 sujets

CSS et mise en forme, CSS3

IE vs FF - Un menu horizontal décalé en hauteur - pkoi ?

Salut les ptits lous Smiley smile

Bon, voilà mon problème : Je fais le menu le plus simple du monde dans un div et IE et mozilla ne le mettent pas à la même place. Je ne crois pas avoir de border ou de margin qui interfèrent, j'aimerais donc comprendre. Mon but au final est de le placer en bas du parent à 4px.

Voici le css :

#acc-menu {
	background-image: url(images/fd-menu.gif);
	width: 750px;
	height: 25px;
	border-bottom: 1px dashed black;
}

#acc-menu ul {
	text-align: center;
}

#acc-menu li {
	display: inline;
	font-size: 10px;
	color: #666666;
	background-color:#CCCCCC;  /* une couleur de fond pour comprendre */
}


Voici le html.

<div id="acc-menu">
<ul>
	<li><a href="http://www.gplays.com/" title="Parcourir les dossiers du site">Dossiers</a></li>
	<li>Fanfics</li>
	<li>Wallpapers</li>
	<li>Dessins</li>
	<li>Courrier</li>
	<li>Forum</li>
	<li>Annuaire</li>
</ul>
</div>


On voit même que des marges existent alors que j'ai defini un * margin et padding à 0

On peut voir la différence entre IE et FF ici : http://www.gplays.com/V4/
Pour une fois, j'aurai tendance à être d'accord avec IE.

ah ici, la boite acc-menu est placée dans le flux d'un conteneur., c'est pour ça qu'il n'y a aucune position de déclarée. Mais faut-il ?

Une idée ?
Modifié le 01 Feb 2005 - 16:25
Administrateur
Wildry a écrit :
On voit même que des marges existent alors que j'ai defini un * margin et padding à 0

Où ??

A ce que je vois, les <ul> et <li> ont toujours leurs marges internes et externes par défaut : tu n'y as pas touché Smiley ohwell

Au fait, à quoi te sert ton <div> autour du menu ? Est-il vraiment nécessaire ?

PS : c'est quoi "pkoi" dans ton titre ?
pkoi = Pourquoi en abrégé : j'avais peur de pas avoir de place ^^
Bien oui le div sert à présenter une image de fond pour agrémenter un peu le menu. Il se trouve dans le flux du reste. mais il y a sûrement une autre solution pour arriver au bon résultat non ? Parce que je ne comprends pas trop pkoi (^^) j'ai cet espace entre les mots sous ff et pas sous ie, et aussi pkoi le menu ne se trouve pas dans le même alignement vertical.

PS, j'ai édité un petit peu le 1er message pour informer de la boite conteneur
Modifié le 01 Feb 2005 - 16:31
C'est la folie ! J'ai trouvé d'ou venait le problème, et ce n'est pas la première fois que ce genre de "souci" arrive.

En fait, il faut aussi determiner la taille de la police dans la balise ul. En mettant un simple font-size: 0;, les 2 navigateurs donnent exactement le même résultat.

Si vous le saviez, tant mieux, mais sinon, vous le saurez comme ça.
Modifié le 01 Feb 2005 - 17:12
Administrateur
Attention, font-size 0 ne fonctionne pas sur tous les navigateurs (Opera par exemple)...
En attendant je n'ai toujours pas vraiment compris ton problème Smiley smile
Ah ? pas cool !
Bien ouai, mon menu sans ce "correctif" ne donne pas le même résultat sous Firefox, et sous IE. On peut toujours aller voir le resultat, j'ai fais les modifs en local seulement.

La reaction de ce menu sous firefox :
Des espaces entre les mots, et un placement vertcial pas au bord haut

La reaction de ce menu sous IE :
Pas d'espace entre les mots, et le menu est bien collé au bord haut du #acc-menu

Pourtant j'ai généré avant un * { padding: 0; margin: 0; }

Une fois le correctif du font-size, IE et FF font la même chose, cad coller le menu au bord haut et ne pas mettre d'espace entre les mots.
Je viens aussi de tester avec et sans ce correctif sous opera.

Les réactions sont un tout petit peu differentes, mais en rien gênantes (dans mon cas) . D'ailleurs, sans le "correctif" Opera reagit aussi comme IE (le texte étant un petit peu plus étiré). Seul Firefox décale un peu trop en vertical vers le bas.
Sujet clos
Aller à