28172 sujets

CSS et mise en forme, CSS3

Liste menu horizontal : décalage entre Firefox et IE/Safari...

Bonjour,

Je veux réaliser un menu tout simple composé d'une liste placée horizontalement.
Le problème c'est que cette liste n'apparait pas positionnée de la même manière suivant que j'utilise Firefox Mac ou Firefox PC, Safari, IE, etc.

Voici comment est constituée ma liste XHTML:

<ul id="menu">
<li><a href="#">Pr&eacute;sentation</a></li>
<li><a href="#">La r&eacute;gion</a></li>
<li><a href="#">S&eacute;jours scolaires</a></li>
<li><a href="#">Tarifs</a></li>
<li><a href="#">Acc&egrave;s et contact</a></li>
</ul>


Et voci mon paramétrage CSS :

ul#menu {
	margin:0px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:19px;
	position: absolute;
	left: 185px;
	top: 130px;
	width: 750px;
}

#menu a {
color:#000000;
text-decoration:none;
}

#menu a:hover {
color:#009900;
}

#menu li {
	display:inline;
	margin-right: 28px;
	padding: 0px;
}


Voici le lien de la page corresondante :
http://www.pierre-leccia.net/anduze1/index.html

Sous Firefox 3 OSX ça apparait correctement et dans les autres navigateurs (mac ou PC y compris Firefox 3 PC), le texte est décallé vers la droite. Un comble pour du CSS !!! Smiley bawling

Alors est-ce qu'il y a quelque chose que j'oublie dans le paramétrage CSS ?
Merci d'avance !!!!!

Pierre
Bonjour,

Une petite question : pourquoi utiliser une position absolue pour placer le menu ?
C'est bien lourd, inutile... et à mon avis, cause du problème évoqué. Smiley cligne 
ul#menu {
        ...
	position: absolute;
	[b]left: 185px;[/b]
        ...
}

Cela signifie que ton menu se place à 185px du bord gauche du plus proche ancêtre positionné.
C'est voulu ? Smiley rolleyes
Modifié par Cygnus (24 Sep 2008 - 15:18)
Oui. Si je ne dis pas de bêtise il s'agit du DIV de ma classe "centrage".
D'ailleurs si je place cette valeur à 0 je tombe bien sur le bord gauche de ma fenêtre.

Ce que je ne comprends pas c'est qu'en placant cette valeur à zéro le menu ne bouge pas.

Est-ce que le problème pourait venir de la typo ou toujours d'une erreur de paramétrage de ma part au niveau des CSS.

J'ai suivi en fait l'exemple proposé dans le livre : CSS 2 de R. Goetter.

Si quelqu'un à une idée !
Merci d'avance !!
Bjorken a écrit :
Oui. Si je ne dis pas de bêtise il s'agit du DIV de ma classe "centrage".
D'ailleurs si je place cette valeur à 0 je tombe bien sur le bord gauche de ma fenêtre.

Logique...
Et donc tu ne veux pas que ton menu se place sur le bord gauche du div centrage ? Smiley confus

Bjorken a écrit :
Ce que je ne comprends pas c'est qu'en placant cette valeur à zéro le menu ne bouge pas.

Est-ce que le problème pourait venir de la typo ou toujours d'une erreur de paramétrage de ma part au niveau des CSS.

J'ai suivi en fait l'exemple proposé dans le livre : CSS 2 de R. Goetter.

Si quelqu'un à une idée !
Merci d'avance !!

Si tu avais une capture d'écran du résultat souhaité, ce serait pas mal du tout.
Car en l'état, je ne comprends absolument pas ce que tu veux obtenir. Smiley sweatdrop
Voici plutôt un exemple du problème.
La même chose donc sous Firefox et Safari.
On note le décalage du texte !

upload/3056-prob.jpg
Pas du tout, vous lisez mal.
Dans mon exemple il s'agit de FireFox sous Mac et Safari sous Mac.
Aucun rapport avec Mac ou PC.

Si quelqu'un a une idée du problème.
Merci
Hello,

Tout d'abord, est-ce vraiment si grave un décalage de quelques pixels entre deux navigateurs pour un menu ?

Si tu y tiens vraiment et veut voir ce qui cloche, je te conseillerai de mettre des couleurs de fond bien flashy (red, yellow, lime, etc) à tes <li> et <a> pour comparer entre les deux où se situe l'erreur (margin? padding ? width ? text-indent ?)

Tu ne pourra de toutes façons pas obtenir un calage parfait de tes polices de caractère au pixel près sur toutes les plateformes
C'est important car la présentation de ce menu l'impose.`

Je vais essayer ce système de couleur pour voir les écarts. Mais de tte manière si je corrige d'un côté, ça n'ira pas de l'autre. Donc, à défaut je vais transformer ce menu en image, mais c'est regrettable car cela nuit au public handicapé et complique un peu lors de la désactivation des CSS et des images.

Ce n'est pas très logique tout de même d'avoir un tel écart (ce n'est quand même pas quelques pixels, mais un peu plus que cela) surtout qu'en testant il s'agit tout le temps des mêmes typos.

Merci.
Sujet clos
Aller à