Jump to content

Le menu déroulant est caché par le slide sous IE6

blasto

By blasto
in PrestaShop pour les développeurs

 Share

Recommended Posts

blasto Newbie

blasto

Posted
Posted

Bonjour,

J'ai un problème visuel sur IE6.
J'utilise un menu horizontale déroulant ainsi qu'un slide en page d'accueil. Mais voilà, sous IE6 le slide cache les sous-menus du menu déroulant.

bugf.gif

J'ai essayé de mettre un z-index à chaqu'un mais cela ne fonctionne toujours pas.

Voici le css du menu horizontal :

/*** ESSENTIAL STYLES ***/
.sf-contener {
 clear: both;
 margin: 10px 0;
 height: 40px;
 line-height: 40px;
 padding-left: 7px;
 background: #000000;

}
.sf-right {
 margin-right: 0px;
 float: right;
 width: 21px;
 background: #000000;
}
.sf-menu, .sf-menu * {
   margin:            0;
   padding:        0;
   list-style:        none;
}
.sf-menu {
 float: left;
 width: 952px;
 line-height:    20px;
 background: #000000;
}
.sf-menu ul {
   position:        absolute;
   top:            -999em;
   width:            10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
   width:            100%;
}
.sf-menu li:hover {
   visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
   float:            left;
   position:        relative;
}
.sf-menu a {
   display:        block;
   position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
   left:            0;
   top:            2.7em; /* match top ul list item height */
   z-index:        999;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
   top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
   left:            10em; /* match ul width */
   top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
   top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
   left:            10em; /* match ul width */
   top:            0;
}

/*** DEMO SKIN ***/
.sf-menu {
   float:            left;
   margin-bottom:    1em;
}
.sf-menu a {
 border: 0;
/*    border-left:    1px solid #fff;
   border-top:        1px solid #CFDEFF; */
   padding:         .75em 1em;
   text-decoration:none;
   background: transparent url('../img/bullet.gif') no-repeat center left;    
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
   color: #ffffff;
   font-size: 13px;
}
.sf-menu li li {
   background:        #000000;/*#AABDE6;*/
}
.sf-menu li li li {
   background:        #000000;/*#9AAEDB;*/
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHoverForce,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
   background: black url('../img/bullet-hover.gif') no-repeat center left;
   color: #ffffff;
   text-decoration: underline;
}
.sf-menu li.noBack:hover, .sf-menu li.sfHover.noBack, .sf-menu li.sfHoverForce.noBack,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
 background: inherit;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
   background:        #56529d;
   outline:        0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
   padding-right:     2.25em;
   min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
   position:        absolute;
   display:        block;
   right:            .75em;
   top:            1.05em; /* IE6 only */
   width:            10px;
   height:            10px;
   text-indent:     -999em;
   overflow:        hidden;
   background:        url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
   top:            1.4em;
   background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
   background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
   background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
   background:    url('../img/shadow.png') no-repeat bottom right;
   padding: 0 8px 9px 0;
   -moz-border-radius-bottomleft: 17px;
   -moz-border-radius-topright: 17px;
   -webkit-border-top-right-radius: 17px;
   -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
   background: transparent;
}
li.sf-search {
 background: #ff9900;
 float: right;
 height: 40px;
 text-align: right;
}

li.sf-search input {
 -moz-border-radius: 0 5px 5px 0;
 padding: 3px 0;
 padding-left: 65px;
 margin-top: 9px;
 background: #fff url(../img/search.gif) no-repeat left center;
}




Et le css du slide :

  #test2 {
   float:left;
   z-index: 9;
   border: 0px solid #BDC2C9; /*ancho, tio y color del borde*/
   width: 731px; /*Mismo ancho que la imagen*/
   height: 426px; /*Mismo alto que la imagen*/
   background:url('../images/loadingAnimation.gif') no-repeat center center;
 }
 .crea_espacio{
 width: 100%;
 height: 0px; /*Poner 20px mas que la altura de la imagen, para evitar problemas con el homefeature.*/
 margin-bottom: 0px; /*Margen que dejaremos del slide al elemento posterior*/
 }



Une petite aide svp ?


Merci :)

Link to comment
Share on other sites
blasto Newbie

blasto

Posted
  • Author
Posted

J'ai remplacer le 999 par 10000 mais cela ne change rien;

sf-menu li.sfHover ul {
left: 0;
top: 2.7em; /* match top ul list item height */
z-index: 999;


J'ai essayé d'enlever le z-index pour voir si vraiment il avait un impacte et effectivement il en a un puisque sous IE8, en l'enlevant le menu passe eu dessous du slide .

IE6 toujours le même problème ...
Link to comment
Share on other sites
Eric Lavoisier Newbie

Eric Lavoisier

Posted
Posted

J'avais pas tilté tout de suite sur IE6 mais en fait la soluce n'est pas forcément simple à mettre en place.
Il reste la possibilité avec les commentaires conditionels d'afficher un message à ceux qui ont IE6 et de leur demander de passer à IE7 ou d'utiliser firefox etc...
Une piste semble etre proposée ici :

http://developpeur.mediabox.fr/index.php?showtopic=24021

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

Quelqu'un peut me rappeler la date de sortie d'IE6.

Car, franchement, c'est tellement vieux que je ne m'en souvient même pas.

A titre perso, je ne m'occupe meme plus d'IE6. Je met un commentaire pour les heureux possesseurs d'IE6 et s'ils sont pas content ils ont qu'a fonder un groupe Facebook "Non au mépris des utilisateurs d'IE6".
:)
Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

la date c'est une chose, mais 20% d'utilisateurs (clients potentiels...)

le problème dans ce cas c'est que le menu est inutilisable. (on peut supporter que le site ne soit pas aussi beau sur ie, mais au mois qu'ils soit utilisable.)

le z-index ne fonctionne pas si un des bloc est "hors du flux" à cause d'un float:left par exemple.

Link to comment
Share on other sites
pieroxy Newbie

pieroxy

Posted
Posted
A titre perso, je ne m'occupe meme plus d'IE6. Je met un commentaire pour les heureux possesseurs d'IE6 et s'ils sont pas content ils ont qu'a fonder un groupe Facebook "Non au mépris des utilisateurs d'IE6".
:)


Je suis bien d'accord avec tout ça. J'ai même créé un script pour ne plus avoir à développer ça tout seul. Ca s'appelle l'initiative d'information IE. Trois lignes à inclure dans son site, et zou! Le warning est là tout seul.

En plus, on essaye d'expliquer aux internautes le pourquoi du message... après, c'est une question de point de vue !
Link to comment
Share on other sites
  • 4 months later...
  • 1 year later...
daseb Newbie

daseb

Posted
Posted

Bonjour,

 

Je déterre ce topic car j'ai le même soucis mais avec un slide en flash.

 

La réponse est au dessus mais le code a disparu !

 

Quelqu'on pourrait-il me redonner la solution (le bout de code et son emplacement) pour que mon flash qui est contenu dans l'editeur de page d'accueil repasse en dessous des menu déroulés du blocktopmenu de Julien Dreux svp ?

 

Merci beaucoup à tous par avance !!

Link to comment
Share on other sites
Imelia Newbie

Imelia

Posted
Posted

Question: toujours pour une optimisation sous IE6?

Pitié, pas cela :( Moins de 5% des utilisateurs aujourd'hui, et des standards que IE ne tolèrera de toute façon pas...Si je peux me permettre, optimiser aujourd'hui des sites pour IE6 n'a aucun sens. C'est juste une perte de temps.

 

Mais ce n'est que mon avis :rolleyes:

Link to comment
Share on other sites
Carl Favre Newbie

Carl Favre

Posted
Posted

Bonjour daseb,

 

J'ai modifié le post où le code était manquant. Maintenant tu devrais le voir.

 

Mais comme dit Imelia, IE6 est totalement désuet et abandonné. Il ne représente plus qu'une petite partie des utilisateurs.

 

A toi de voir si le temps nécessaire à rendre compatible IE6 vaut le coup.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...