Problème affichage entre Mac et Windows

Bonsoir,

Bon voilà je vous avez déjà parlé de mon menu vertical , et vous m'aviez proposez une méthode pour que je fasse ce fameux menu. Malheureusement la technique des matrices ne correspondait pas à mes besoins. Après réflexion j'ai fait mon menu en utilisant des images et un pseudo bidouillage avec des padding notamment pour que mon menu s'affiche nickel... Ce qui est le cas sur Windows (Chrome, firefox, IE : OK). MAis par contre sur Mac c'est pas la même et j'ai pas encore (osé) testé sur Linux...

Voilà des imprimes écrans des rendus Windows vs Mac :



VS



Et voilà mon code Html :

<ul>
	<li><img src="img/Coin-Vert.png" /><a href="#">Atout</a><img src="img/Triangle-Vert-Vert.png" style="position: absolute; left: 115px;" /></li>
	<li><img src="img/Bande-Vert.png" /><a href="#"><img src="img/Triangle-Noir.png" style="border: none;" > Prépas</a><img src="img/Triangle-Vert-Vert.png" style="position: absolute; left: 82px;" />
		<ul>
			<li><img src="img/Coin-Vert.png" /><a href="#"><img src="img/Triangle-Noir.png" style="border: none;" > L1 Santé - P.A.C.E.S.</a><img src="img/Triangle-Vert-Vert.png" style="position: absolute; left: 208px;" />
				<ul>
				<li style="margin-left: 32px;"><img src="img/Coin-Vert.png" /><a href="#">Médecine</a><img src="img/Triangle-Vert-Vert.png" style="position: absolute; left: 122px;" /></li>
				<li><img src="img/Bande-Vert.png" /><a href="#">Pharmacie</a><img src="img/Triangle-Vert-Vert.png" style="position: absolute; left: 92px;" /></li>
				<li><img src="img/Bande-Vert.png" /><a href="#">Dentaire</a><img src="img/Triangle-Vert-Vert.png" style="position: absolute; left: 82px;" /></li>
				<li><img src="img/Bande-Vert.png" /><a href="#">Maïeutique</a><img src="img/Coin-Droit-Vert.png" /></li>
				</ul>
			</li>
			<li><img src="img/Bande-Vert.png" /><a href="#">Paramédical</a><img src="img/Triangle-Vert-Gris-Vert.png" style="position: absolute; left: 104px;" /></li>
			<li><a class="grey" href="#">Sanitaire et Social</a><img src="img/Coin-Gris-Vert.png" /></li>
		</ul>
	</li>
	<li><img src="img/Bande-Vert.png" /><a href="#">Enseignants</a><img src="img/Triangle-Vert-Orange.png" style="position: absolute; left: 103px;"  /></li>
	<li style="padding-right: 81px;"><img src="img/Bande-Orange.png" /><a class="red" href="#">Tarifs et Inscription</a><img src="img/En-Ligne.png" style="position: absolute; left: 102px; margin-left: 50px;"/></li>
	<li><img src="img/Bande-Vert.png" /><a href="#">Résultats</a><img src="img/Triangle-Vert-Vert.png" style="position: absolute; left: 86px;" /></li>
	<li><img src="img/Bande-Vert.png" /><a href="#">Contact</a><img src="img/Triangle-Vert-Gris-Vert.png" style="position: absolute; left: 82px;" /></li>
	<li><img src="img/Bande-Gris-Vert.png" /><a class="grey" href="#">Forum S+</a><img src="img/Coin-Gris-Vert.png" /></li>
</ul>

Mon css :

 /* mise en forme generale */
html{
	text-align:center;
	height:60%;
	display:table;
	padding: 50px;
}

body {
	padding:0;
	display:table-cell;
	vertical-align:middle;
}

div {
	padding:4px 0.5em;
	background:gray;
}

.pink {
	background:pink;
}

/* mise en forme menu */
ul, li  {
	margin:0;
	padding:0 0px;
	list-style-type:none;
	border: none;
}

ul li {
	position:relative;
	display:inline-block;
	border: none;
	padding-right: 31px;
}

li ul , ul li ul li ul  ,ul li:hover ul li ul {
	position:absolute;
	left:-9999px;
	white-space:nowrap;
	padding-top:0px;
	border: none;
}

ul li:hover ul,ul li:hover ul li:hover ul {
	left:-70px;
	border: none;
}

a {
	display:inline-block;
	line-height:17px;	
	padding:0 10px;
	margin:0;
	min-width:60px;
	background-image:url(../img/Bande-Vert.png);
	vertical-align:top;
	text-decoration: none;
	color: #2a5e61;
	font-weight: bold;
	border: none;
}

.red {
	background-image:url(../img/Bande-Orange.png);
	color: white;
	font-weight: bold;
	border: none;
}

.grey {
	background-image:url(../img/Bande-Gris-Vert.png);
	color: white;
	border: none;
}

a:hover {
	color:black;
	border-color:black;
	border: none;
}

/* ajout css ludique */
ul, li  {}

li +li +li +li:hover ul,    li +li +li +li:hover ul li:hover ul  {
	right:20px;
	left:auto;
	direction: rtl;
}

li +li +li +li       ul, ul li +li +li +li:hover ul li       ul  {
	left:-9999px;
	right:auto;
}

div {
	-moz-box-shadow:inset 0 0 03px white, 0 0 3px black, 0 0 5px 5px gold, 0 0 10px 8px black, 0 0 0px 15px gold;
}

strong {
	display:block;
}

Je penses que j'ai été trop bourrin avec les images mais sur le coup ça m'a parut être une bonne idée .

J'ai pensé à utiliser du javascript pour détecter sur quel OS j'étais et du coup j'aurai pu gérer ma mise en forme en fonction... Mais est-ce vraiment la meilleur solution ? J'ai bien peur que non...

Si vous pouviez m'aiguiller sur mes erreurs ça serait cool que je puisse enfin finir ce menu lol

Merci d'avance si vous avez pris le temps de lire mon message.

A+
Modifié par Stick (10 Mar 2011 - 22:21)

bonjour,

une page en ligne faciliterait le coup de main et comprendre comment tu tente de t'y prendre.
Le code html vu de la est effectivement bourrin et quasi impossible a maintenir.

cordialement.