(SOLVED) Blocktopmenu (?) bug sous IE !

[ptitan]

Bonjour à tous !

 

Je poste ce message après avoir passé des heures à bucher sur la question... Je n'ai rien trouvé sur internet qui puisse répondre à ma question...

 

J'ai configuré la css du blocktopmenu pour qu'elle soit compatible (enfin, c'est ce que j'espèrais..) avec tous les principaux navigateurs... Mais l'affichage est complètement différent sous Firefox/Chrome et IE... Voyez :

 

TopMenu sous Firefox (22.0)

 

Et TopMenu sous IE10

 

Voilà en fait j'aimerais bien supprimer cette barre noire rendue sous IE, et la remplacer par celle de firefox (border-radius, gradient etc).. Est-ce que quelqu'un aurait une idée.. Il me semblait pourtant avoir ajouter toutes les fonctions de compatibilité...

 

Je vous copie mon superfish-modified.css..

 

 

 

/* Main menu */

#menu-custom, #menu-custom ul {
 margin: 0;
 padding: 0;
 list-style: none;
 position:relative;
 z-index:9999999999;
 clear: both;
}
#menu-custom
{
width: 100%;
margin: 30px auto; /* 60px */
padding: 10px 0px 0px 10px;
list-style: none;
background: #F8CDCD;
background: -moz-linear-gradient(#F8CDCD, #FFCCCC);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F8CDCD),color-stop(1, #FFCCCC));
background: -webkit-linear-gradient(#F8CDCD, #FFCCCC);
background: -o-linear-gradient(#F8CDCD, #FFCCCC);
background: -ms-linear-gradient(#F8CDCD, #FFCCCC);
background: linear-gradient(#F8CDCD, #FFCCCC);
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0 2px 2px #BE1561;
-webkit-box-shadow: 0 2px 2px #BE1561;
box-shadow: 0 2px 2px #BE1561;

}

#menu-custom li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}

#menu-custom a
{
float: left;
height: 25px;
padding: 0px 25px;
color: #BE1561;
text-transform: none;
font: bold 15px/25px 'PT Serif Caption',serif;
text-decoration: none;
text-shadow: 0px 1px 0.5px #FFEEF6;
}

#menu-custom li:hover > a{
background:#FFEEF6;
border-radius: 15px;
box-shadow: 0 1px 1px #BE1561;

}
*html #menu-custom li a:hover /* IE6 */
{
color: #fafafa;
}

#menu-custom li:hover > ul
{
display: block;
}

/* Sub-menu */

#menu-custom ul
{

list-style: none;
margin: 0;
padding: 0;  
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;  
background:#F8CDCD;
opacity: 1;
 -moz-box-shadow: 0 1px 1px #BE1561;
-webkit-box-shadow: 0 1px 1px #BE1561;
box-shadow: 0 1px 1px #BE1561;
-moz-border-radius: 15px;
border-radius: 15px;
}

#menu-custom ul ul
{
 top: 0;
 left: 220px;
}

#menu-custom ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #F8CDCD111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #F8CDCD111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #F8CDCD111, 0 2px 0 #777777;
}

#menu-custom ul li:last-child
{  
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;  
}

#menu-custom ul a
{  
padding: 10px;
height: 5px;
width: 200px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu-custom ul a /* IE6 */
{  
height: 10px;
}

*:first-child+html #menu-custom ul a /* IE7 */
{  
height: 10px;
}

#menu-custom ul a:hover
{
background: #FFEEF6;

}

#menu-custom ul li:first-child > a
{
-moz-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;
}

#menu-custom ul li:first-child > a:after
{
content: '';
position: absolute;
left: 25px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #BE1561;
opacity: .9;
}

#menu-custom ul ul li:first-child a:after
{
content: '';  
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #BE1561;
opacity: .9;
}

#menu-custom ul li:first-child a:hover:after
{
border-bottom-color: #D11546;
}

#menu-custom ul ul li:first-child a:hover:after
{
border-right-color: #D11546;
border-bottom-color: transparent;
}


#menu-custom ul li:last-child > a
{
-moz-border-radius: 0 0 15px 15px;
border-radius: 0 0 15px 15px;
}

/* Clear floated elements */
#menu-custom:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html #menu-custom			 { zoom: 1; } /* IE6 */
*:first-child+html #menu-custom { zoom: 1; } /* IE7 */
background-image: -moz-linear-gradient(#080004, #080004);
background-image: -webkit-gradient(linear, left top, left bottom, from(#080004), to(#080004));
background-image: -webkit-linear-gradient(#080004, #080004);
background-image: -o-linear-gradient(#080004, #080004);
background-image: -ms-linear-gradient(#080004, #080004);
background-image: linear-gradient(#080004, #080004);
}
#menu-custom ul li:first-child > a:after {
content: '';position: absolute;left: 40px;top: -6px;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #927D6A;}
#menu-custom ul ul li:first-child a:after {left: -6px;top: 50%;margin-top: -6px;border-left: 0;border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-right: 6px solid #927D6A;}
#menu-custom ul li:first-child a:hover:after {border-bottom-color: #080004;}
#menu-custom ul ul li:first-child a:hover:after {border-right-color: #080004;border-bottom-color: transparent;}
#menu-trigger {display: none;}
#menu-custom {display: block;}
@media only screen and (max-width:1199px) {
#menu-wrap {position: relative;}
#menu-wrap * {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#menu-trigger {display: block; height: 48px;line-height: 48px;cursor: pointer;padding: 0 0 0 20px;color: #FFF;font-weight: bold;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:23px; background:#000;}
#menu-trigger.menu-custom-icon .menu-icon{background:url(../../../../img/sprite_clothes.png) no-repeat left -797px #000; }
#menu-trigger .menu-icon{background:url(../../../../img/sprite_clothes.png) no-repeat left -749px #000;width:26px; height:26px; display:block; position:absolute; top:11px; right:10px;}
#menu-custom {margin: 0; padding: 10px;position: absolute;top: 48px;width: 100%;z-index: 1;background-color: #927D6A;display: none;}
#menu-custom:after {content: '';position: absolute;left: 25px;top: -8px;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid #927D6A;}
#menu-custom ul {position: static;visibility: visible;opacity: 1;margin: 0;background: none;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
#menu-custom ul.menu-mobile-2{ display:none;}
#menu-custom ul ul {margin: 0 0 0 20px !important;}
#menu-custom li {position: static;display: block;float: none;border: 0;margin: 5px 15px 5px 5px;position:relative;}
#menu-custom ul li{margin-left: 20px;}
#menu-custom a{display: block;float: none;padding:5px;color: #FFF;font-size:18px;}
#menu-custom a:hover{color: #000;}
#menu-custom ul a{padding:5px;width: auto;}
#menu-custom ul a:hover{background: none;color: #000;}
#menu-custom ul li:first-child a:after,
#menu-custom ul ul li:first-child a:after {border: 0;}

.open-mobile-2{width:18px;height:18px;display:block;position:absolute;right:-11px;top:7px;background:url(../../../../img/sprite_clothes.png) no-repeat left -715px;}
.open-mobile-2:hover{ cursor:pointer;}
.open-mobile-2.mobile-close-2{background:url(../../../../img/sprite_clothes.png) no-repeat left -846px;}
.open-mobile.mobile-close{background:url(../../../../img/sprite_clothes.png) no-repeat left -846px;}
#header-inner .row {margin-left:0px;}
#menu-custom {margin-left:0px;}
.no-transition {-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;opacity: 1;visibility: visible;display: none;}
#menu-custom li:hover > .no-transition {display: block;}
}

 

 

Merci à tous !

Edited August 1, 2013 by ptitan (see edit history)

[Oron]

Bonjour

 

Vous pouvez préciser la version de Prestashop et du module topmenu ?

Merci.

[ptitan]

Bonjour

 

Vous pouvez préciser la version de Prestashop et du module topmenu ?

Merci.

 

Oui, j'avais oublié ! Ma version de PS est la 1.5.4.1, et celle de blocktopmenu (sans pour autant être sûr que le problème vienne du module) est la 1.5..

[ptitan]

Une idée ? ou à défaut une piste, parce que là je sèche....

[JayLab]

Ton menu passe en responsive design sous IE, c'est les classes open mobile qui gérent...

Tu utilises un thème perso ou acheté ?, je ne connais le thème responsive de prestashop mais c'est peut être celui là...

[ptitan]

Ton menu passe en responsive design sous IE, c'est les classes open mobile qui gérent...

Tu utilises un thème perso ou acheté ?, je ne connais le thème responsive de prestashop mais c'est peut être celui là...

 

Merci de ta réponse JayLab ! Mon thème est un thème gratuit que j'ai modifié moi-même..

Juste une question ; je ne comprends vraiment pas pouquoi ce sont les classes openmobile qui sont actives sous IE, et pas les autres classes... Pourquoi juste IE ?

[JayLab]

Ben ça... Il y a une erreur d'interprétation quelque part il faut regarder le code généré Afficher la source sous IE, quelle version utilises tu de IE ? Envoie le code de la source ou une adresse.

 

La source pas le TPL hein ! le code généré

[ptitan]

Ben ça... Il y a une erreur d'interprétation quelque part il faut regarder le code généré Afficher la source sous IE, quelle version utilises tu de IE ? Envoie le code de la source ou une adresse.

 

La source pas le TPL hein ! le code généré

 

Aaa c'est bon c'est résolu grace à toi ! J'explique la solution..

Dans la source de la page, le code faisait appel à deux scripts liés à blocktopmenu :

 

<script type="text/javascript" src="/modules/blocktopmenu/js/hoverIntent.js"></script>
<script type="text/javascript" src="/modules/blocktopmenu/js/superfish-modified.js"></script>

 

Et c'est le code du superfish-modified.js qui était lié à mon problème.. voilà son code :

 

$(function() {
 if ($(document.body).width() < 1199){

/* Mobile */
$('#menu-wrap').prepend('<div id="menu-trigger">Category <span class="menu-icon"></span></div>');
$('#menu-trigger').toggle(
function() {
$(this).next('#menu-custom').slideToggle("slow"),{
duration: 'slow',
easing: 'linear'
};
$(this).addClass('menu-custom-icon');
},
function() {
$(this).next('#menu-custom').slideToggle("slow"),{
duration: 'slow',
easing: 'linear'
};
$(this).removeClass('mobile-close-2');
$(this).removeClass('menu-custom-icon');
}
)

$ ('.main-mobile-menu ul ul').addClass('menu-mobile-2');
$ ('#menu-custom ul ').addClass('menu-mobile-2');
$('#menu-custom  li').has('.menu-mobile-2').prepend('<span class="open-mobile-2"></span>');
$("#menu-custom   .open-mobile-2").toggle(
function() {
$(this).next().next('.menu-mobile-2').slideToggle("slow"),{
duration: 'slow',
easing: 'linear'
};
$(this).addClass('mobile-close-2');
},
function() {
$(this).next().next('.menu-mobile-2').slideToggle("slow"),{
duration: 'slow',
easing: 'linear'
};
$(this).removeClass('mobile-close-2');
}
)
}
});

 

En fait ce script appelle une css différente lorsque la taille de la page affichée par le browser est inférieure à 1199...

Le problème est résolu en changeant ce script par celui-ci :

 

;(function($){
$.fn.superfish = function(op){
 var sf = $.fn.superfish,
  c = sf.c,
  $arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
  over = function(){
var $$ = $(this), menu = getMenu($$);
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
  },
  out = function(){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
 o.retainPath=($.inArray($$[0],o.$path)>-1);
 $$.hideSuperfishUl();
 if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
},o.delay);
  },
  getMenu = function($menu){
var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
sf.op = sf.o[menu.serial];
return menu;
  },
  addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

 return this.each(function() {
  var s = this.serial = sf.o.length;
  var o = $.extend({},sf.defaults,op);
  o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
$(this).addClass([o.hoverClass,c.bcClass].join(' '))
 .filter('li:has(ul)').removeClass(o.pathClass);
  });
  sf.o[s] = sf.op = o;

  $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
if (o.autoArrows) addArrow( $('>a:first-child',this) );
  })
  .not('.'+c.bcClass)
.hideSuperfishUl();

  var $a = $('a',this);
  $a.each(function(i){
var $li = $a.eq(i).parents('li');
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
  });
  o.onInit.call(this);

 }).each(function() {
  menuClasses = [c.menuClass];
  if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
  $(this).addClass(menuClasses.join(' '));
 });
};
var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
 var o = sf.op;
 if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
  this.toggleClass(sf.c.shadowClass+'-off');
 };
sf.c = {
 bcClass	 : 'sf-breadcrumb',
 menuClass   : 'sf-js-enabled',
 anchorClass : 'sf-with-ul',
 arrowClass  : 'sf-sub-indicator',
 shadowClass : 'sf-shadow'
};
sf.defaults = {
 hoverClass : 'sfHover',
 pathClass : 'overideThisToUse',
 pathLevels : 1,
 delay  : 800,
 animation : {opacity:'show'},
 speed  : 'fast',
 autoArrows : true,
 dropShadows : true,
 disableHI : false,  // true disables hoverIntent detection
 onInit  : function(){}, // callback functions
 onBeforeShow: function(){},
 onShow  : function(){},
 onHide  : function(){}
};
$.fn.extend({
 hideSuperfishUl : function(){
  var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
  o.retainPath = false;
  var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
 .find('>ul').hide().css('visibility','hidden');
  o.onHide.call($ul);
  return this;
 },
 showSuperfishUl : function(){
  var o = sf.op,
sh = sf.c.shadowClass+'-off',
$ul = this.addClass(o.hoverClass)
 .find('>ul:hidden').css('visibility','visible');
  sf.IE7fix.call($ul);
  o.onBeforeShow.call($ul);
  $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
  return this;
 }
});
})(jQuery);
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});

 

 

Avec ça, ça fonctionne sur ie8 - 9 - 10 , firefox et chrome sans problème..

Merci JayLab pour tes pistes !

[JayLab]

cool !