Pblm de compatibilité FF/ IE: décalage menu
titelapine
-
math 2000 Messages postés 2589 Date d'inscription Statut Membre Dernière intervention -
math 2000 Messages postés 2589 Date d'inscription Statut Membre Dernière intervention -
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=======================================
========================================================================
========================================================================
Voila c'est pas très claire et le site n'est pas encore en ligne...
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...
Configuration: Windows XP Firefox 2.0.0.13
3 réponses
-
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?
-
Je ne suis pas expert en la matiére.
-
c'est simple d'avoir un menu compatible ie
http://bormat2.free.fr/wordpress4/