Pblm de compatibilité FF/ IE: décalage menu

titelapine -  
math 2000 Messages postés 2833 Statut Membre -
Bonjour,

Je n'arrive pas à résoudre un problème sur mon menu, malgrès toutes vos réponses sur le forum pour d'autre personne..
Mon menu est horizontal, avec pour chaque bouton une image à la place.Sur firefox il s'affiche parfaitement, mais surIE la liste du menu fait une diagonale vers le bas, les boutons se décalent au lieu de rester horizontal.
Si vous pouviez m'aider ce serait vraiment adorable...

========================================================================
=============================Code HTML====================================

<div id="viooMenu">
<ul class="viooMenuOnglet">

<li><a href="rien"><span><div class='rubMode aligntext' style='z-index:100;' > mode </div></span></a>
<ul class="winMode">
<li class="subItem"><a href="/vioo_front_fre/Internals/Menu-items/Mode/Conseils-mode">Conseils mode</a></li>
<li class="subItemMark">•</li>
<li class="subItem"><a href="/vioo_front_fre/Internals/Menu-items/Mode/Mon-dressing-ideal">Mon dressing idéal</a></li>
<li class="subItemMark">•</li>
<li class="subItem"><a href="/vioo_front_fre/Internals/Menu-items/Mode/Tendances">Tendances</a></li>
<li class="subItemMark">•</li>
<li class="subItemMark">|</li>
<li class="subItem"><a href="/vioo_front_fre/Mode/tests">Les tests</a></li>
<li class="subItemMark">•</li>
<li class="subItem"><a href="/vioo_front_fre/Mode/groups">Groupes</a></li>
<li class="subItemMark">•</li>
<li class="subItem"><a href="/vioo_front_fre/Mode/videos">Vidéos</a></li>
<li class="subItemMark">•</li>
<li class="subItem"><a href="/vioo_front_fre/Mode/photos">Photos</a></li>
<li class="subItemMark">|</li>
<li class="subItem"><a href="/vioo_front_fre/Mode">Index Mode</a></li>
</ul>
</li>
=======================================================================
==============================CSS=======================================

/* Container */
div#viooMenu {position:absolute;display:block;top:85px;width:963px;height:55px;margin:0;padding-left:2px;}

/* Main Menu */
.viooMenuOnglet {position:relative; display:block; top:85px; padding-left:2px; padding:0px; margin:0;list-style:none;
					width:963px; height:60px;z-index:100;}
.viooMenuOnglet li.spacing {float:left;margin:0 1px 0 0;}					

/* Main Menu : no-hover styles  */

.viooMenuOnglet    a { text-decoration:none; }
.viooMenuOnglet  li a span {margin:0.5px; padding:0;font-family:Gorgia,sans-serif; text-transform:uppercase;                          font-size:12px; color:#fff;     
							 text-align:center;float:left; display:table-column-group; width:80px; height:24px;  
							 vertical-align:middle;}
	.rubMode		{position:absolute;  background:transparent url(images/top_menu/mode.png)0 0                         no-repeat;width:80px;height:24px;}	
	
         .rubAstro 		{position:absolute;  background:transparent url(images/top_menu/astro.png)0 0 no-repeat;width:80px;height:24px;}
	
        .rubBeaute 		{position:absolute;  background:transparent url(images/top_menu/beaute¦ü.png) 0 0 no-repeat;width:80px;height:24px;}
 	
        .rubAuBoulot	{position:absolute;  background:transparent url(images/top_menu/auboulot.png) 0 0 no-repeat;width:80px;height:24px;}
	
         .rubPeople 		{position:absolute;  background:transparent url(images/top_menu/people.png) 0 0 no-repeat; width:80px;height:24px;}
	.rubCuisine 	{position:absolute;  background:transparent url(images/top_menu/cuisine.png) 0 0 no-repeat; width:80px;height:24px;}
	
         .rubHigh-Tech	{position:absolute;  background:transparent url(images/top_menu/hightech.png) 0 0 no-repeat; width:80px;height:24px;}
	
        .rubLoveAndSexe {position:absolute;  background:transparent url(images/top_menu/loveandsex.png) 0 0 no-repeat; width:80px;height:24px;}
	
       .rubLuxe 		{position:absolute;  background:transparent url(images/top_menu/luxe.png) 0 0 no-repeat; width:80px;height:24px;}
	
     .rubMinceur		{position:absolute;  background:transparent url(images/top_menu/minceur.png) 0 0 no-repeat; width:80px;height:24px;}
	
      .rubShopping	{position:absolute;  background:transparent url(images/top_menu/shopping.png) 0 0 no-repeat; width:80px;height:24px;}
	.rubViooTv 		{position:absolute;  background:transparent url(images/top_menu/viootv.png) 0 0 no-repeat;width:80px;height:24px;}


	.rubMode:hover			{position:absolute; background:transparent url(images/top_menu/mode2.png)0 0 no-repeat;width:81px;height:56px;bottom:25px; }	
	
         .rubAstro:hover 		{position:absolute; background:transparent url(images/top_menu/astro2.png)0 0 no-repeat;width:81px;height:56px;bottom:25px;}
	 
        .rubBeaute:hover 		{position:absolute; background:transparent url(images/top_menu/beaute¦ü2.png) 0 0 no-repeat;width:81px;height:56px;bottom:25px;}

 	.rubAuBoulot:hover		{position:absolute; background:transparent url(images/top_menu/auboulot2.png) 0 0 no-repeat; width:81px;height:56px;bottom:25px;}

	.rubPeople:hover 		{position:absolute; background:transparent url(images/top_menu/people2.png) 0 0 no-repeat; width:81px;height:56px;bottom:25px;}

	.rubCuisine:hover 		{position:absolute; background:transparent url(images/top_menu/cuisine2.png) 0 0 no-repeat; width:81px;height:56px;bottom:25px;}

	.rubHigh-Tech:hover		{position:absolute; background:transparent url(images/top_menu/hightech2.png) 0 0 no-repeat;width:81px;height:56px;bottom:25px;}

	.rubLoveAndSexe:hover 	{position:absolute; background:transparent url(images/top_menu/loveandsex2.png) 0 0 no-repeat; width:81px;height:56px;bottom:25px;}

	.rubLuxe:hover 			{position:absolute; background:transparent url(images/top_menu/luxe2.png) 0 0 no-repeat; width:81px;height:56px;bottom:25px;}

	.rubMinceur:hover		{position:absolute; background:transparent url(images/top_menu/minceur2.png) 0 0 no-repeat; width:81px;height:56px;bottom:25px;}

	.rubShopping:hover		{position:absolute; background:transparent url(images/top_menu/shopping2.png) 0 0 no-repeat; width:81px;height:56px;bottom:25px;}

	.rubViooTv:hover 		{position:absolute; background:transparent url(images/top_menu/viootv2.png) 0 0 no-repeat;width:81px;height:56px;bottom:25px;}


/* Main Menu: alignement texte*/
.aligntext {padding:5px 0 0 0; margin:0;}


/* Sous Menu : window position */
.viooMenuOnglet ul {display:none;top:24px;width:970px;height:33px;padding:8px;margin:0;list-style:none;z-index:50;
					filter:alpha(opacity=95);/* IE*/-moz-opacity:.95;/* Mozilla*/opacity:.95; /*générale*/-khtml-opacity:.95;}


/* Sous Menu : windows colors/positions & links colors */
.viooMenuOnglet li:hover ul { margin:0;padding:0;display:block; padding-top:8px;height:55px; text-align:center;line-height:0;  }

.viooMenuOnglet li:hover  a{ text-decoration:none; padding:8px 0 0 0;}
.winMode {position:absolute;background:transparent url(../images/top_menu/BgSubmenuMode.gif) 0 0 no-repeat;left:0; }

	.winMode a{color:#47494a;}
.winAstro {position:absolute;background:transparent url(../images/top_menu/BgSubmenuAstro.gif) 0 0 no-repeat;left:0; }
	.winAstro a {color:#0484b0;}
.winBeaute {position:absolute;background:transparent url(../images/top_menu/BgSubmenuBeauty.gif) 0 0 no-repeat;left:0; }
	.winBeaute a {color:#be54a0;}
.winAuBoulot {position:absolute;background:transparent url(../images/top_menu/BgSubmenuAuboulot.gif) 0 0 no-repeat;left:0; }
	.winAuBoulot a {color:#dfbe51;}
.winPeople {position:absolute;background:transparent url(../images/top_menu/BgSubmenuPeople.gif) 0 0 no-repeat;left:0; }
	.winPeople a {color:#c61d23;}
.winCuisine {position:absolute;background:transparent url(../images/top_menu/BgSubmenuCuisine.gif) 0 0 no-repeat;left:0; }
	.winCuisine a {color:#98425c;}
.winHigh-Tech {position:absolute;background:transparent url(../images/top_menu/BgSubmenuHigh-Tech.gif) 0 0 no-repeat;left:0; }
	.winHigh-Tech a {color:#838385;}
.winLoveAndSexe {position:absolute;background:transparent url(../images/top_menu/BgSubmenuLove&Sexe.gif) 0 0 no-repeat;left:0; }
	.winLoveAndSexe a {color:#e18fb4;}
.winLuxe {position:absolute;background:transparent url(../images/top_menu/BgSubmenuLuxe.gif) 0 0 no-repeat;left:0; }
	.winLuxe a {color:#a48d6b;}
.winMinceur {position:absolute;background:transparent url(../images/top_menu/BgSubmenuMinceur.gif) 0 0 no-repeat;left:0; }
	.winMinceur a {color:#7abdcd;}
.winShopping {position:absolute;background:transparent url(../images/top_menu/BgSubmenuShopping.gif) 0 0 no-repeat;left:0; }
	.winShopping a {color:#6aaa90;}
.winViooTv {position:absolute;background:transparent url(../images/top_menu/BgSubmenuViooTv.gif) 0 0 no-repeat;left:0; }
	.winViooTv a {color:#72287c;}

li.subItem {  display:inline;font:normal 12px Gorgia, sans-serif; cursor:pointer; }
li.subItem a{  display:inline; font:normal 12px Gorgia, sans-serif; padding:8px 2px 0 2px; }
li.subItemMark { display:inline; font:normal 12px Gorgia, sans-serif; margin:8px 2px 0 2px;color:#686d6f;}


========================================================================
========================================================================

Voila c'est pas très claire et le site n'est pas encore en ligne...
A voir également:

3 réponses

calogero89 Messages postés 69 Statut Membre 8
 
En fait firefox respecte les standarts alors que IE ne les respecte pas. Puis c'est sur quelle version de IE que ca te fait ca?
1
titelapine
 
Oui je sais que IE respect rien et je m'en mord les doigts ça fait deux jours que je suis la dessus et en plus il faut que le menu soit bientôt terminé ...
J'ai la version 7.0 d'IE.

Je pense que ya une toute petite erreur dans le CSS qui fait tout décaler...
0
calogero89 Messages postés 69 Statut Membre 8
 
Je ne suis pas expert en la matiére.
0
BUMPER
 
Vous confondez standard et norme....
0
math 2000 Messages postés 2833 Statut Membre 405
 
c'est simple d'avoir un menu compatible ie
http://bormat2.free.fr/wordpress4/
0