Pblm de compatibilité FF/ IE: décalage menu
titelapine
-
math 2000 Messages postés 2833 Statut Membre -
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=======================================
========================================================================
========================================================================
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...
A voir également:
- Pblm de compatibilité FF/ IE: décalage menu
- Compatibilite windows 11 - Guide
- Ie tab - Télécharger - Outils pour navigateurs
- Bill ie cork ✓ - Forum Consommation & Internet
- Adresse ff - Forum Réseau
- Erreur 20 ff free - Forum Réseaux sociaux
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?
J'ai la version 7.0 d'IE.
Je pense que ya une toute petite erreur dans le CSS qui fait tout décaler...