[résolu] Soucis % avec mozilla, chrome et safari

bonjour à tous,
mon site en réalisé en % et j'ai un soucis d'apparence avec les navigateurs mozilla, chrome et safari, alors que tout est nickel avec IE8.
le soucis se situe au niveau de mon menu, qui est composé de liens images. le code html est fait de cette façon (je ne met pas le code complet du menu, juste un exemple:

<div id="discri"><a href="/discrimination.html"><img src="discrimination.jpg" onmouseover="this.src='discriminationb.jpg'" onmouseout="this.src='discrimination.jpg'" border=no/></a></div><div id="mine"><a href="mineralisation/.html"><img src="mineralisation.jpg" onmouseover="this.src='mineralisationb.jpg'" onmouseout="this.src='mineralisation.jpg'" border=no/></a></div>

le code css est comme ceci:

img{width:100%;height:100%;}

et

#discri{position:absolute;left:0%;top:44.4%;width:15.9%;height:7.9%;}
#mine{position:absolute;left:0%;top:52.6%;width:15.9%;height:7.9%;}

normalement l'espacement entre les images doit toujours être égale, et c'est le cas avec IE8, voici l'image:
sur cette image on voit bien que l'espacement entre les liens images est régulier.

maintenant voilà le rendu avec mozilla (c'est pareil avec safari):
on voit bien sur l'image que l'espacement entre les liens images n'est pas régulier, certains étant plus espacés que d'autres.

maintenant voilà avec chrome:
le soucis d'espacement irrégulier est le même que mozilla (mais pas aux mêmes androits) et en plus les bord bas et droit des liens images sont plus fins que le haut et le gauche, alors que normalement ils devraient être de la même épaisseur.
merci d'avance pour votre aide.
Modifié par alex84 (02 Jan 2012 - 12:30)

Salut,

Refaire ton menu avec un ul et des li serait mieux qu'une succession de div.
En plus, cela peut très bien se faire en CSS uniquement, sans image, avec un jeu de couleur et de background différents au hover.

+1 jmapam.
Ce serai déjà plus clair avec :

<ul>
<li> un bouton </li>
<li> deux bouton </li>
</ul>

Après dans ton code CSS, tu enlève les puces, tu met ton menu en ligne et tout et tout !

Tu as de très bons exemples ici :
http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
Modifié par alexasm15 (26 Dec 2011 - 15:29)

Vérifie le niveau de zoom des différents navigateurs.
souvent le zoom (Ctrl +) donne ce genre de dégradations.

Utilises un reset : http://www.alsacreations.com/astuce/lire/654-feuille-de-styles-de-base.html

merci à tous pour vos réponses.
je ne veux pas faire un menu uniquement via css (c'est ce que j'avais avant), je tiens vraiment à un menu image, car mon site est en %, et l'avantage du menu image pour un site en % c'est que peut importe la résolution et le niveau de zoom du visiteur, le menu reste toujours nickel.
j'ai déjà utilisé un reset mais çà n'a rien donné, et pour le niveau de zoom utilisé pour les images que j'ai posté il est le même pour tous les navigateurs.
vraiment je ne vois pas d'ou le problème peut venir.

bonjour,
mon soucis est résolu, j'ai fais un menu images un poil différent pour ne plus avoir de soucis esthétique.