[Résolu] Enorme Différence Entre 2 Navigateurs

[micka7113]

Bonjour à tous,

Voila j'ai effectué tout mon site sur google chrome, et je viens de tester par curiosité sur Internet explorer, et je rencontre pas mal de problème tels que :

Le menu horizontal n'apparait pas

Un menu catégorie est présent en haut de page ( il n'y est pas sur google chrome)

Le bloc reassurance est pas horizontale mais vertical...

 

Regardez par vous même : www.essentiel71.fr

 

Que faut-il faire donc pour que le site soit quasi identique sur les 2 ?!

 

Merci d'avance

Edited March 7, 2013 by micka7113 (see edit history)

[btsconsult]

Bonjour,

 

En effet je confirme.

As-tu essayé en désactivant tous les CCC ?

[micka7113]

Alors tout etait deja desactivé sauf l'optimisation Apache mais en le désactivant ça n'a rien changé.. :-/

[btsconsult]

Bonjour,

 

En ce qui me concerne, je n'ai pas de solution

En espérant qu'un DEV passe par ici...

[micka7113]

Merci tout de même de ton aide.

Je trouve ça tout de même bizarre cette différence de résultat sur 2 navigateurs...Sur IE, je n'ai pas du tout de Menu.. Hallucinant non?!

[btsconsult]

Merci tout de même de ton aide.

Je trouve ça tout de même bizarre cette différence de résultat sur 2 navigateurs...Sur IE, je n'ai pas du tout de Menu.. Hallucinant non?!

C'est peu dire !

[micka7113]

Hum je vais voir ce que je trouve sur la toile.. ;-)

[micka7113]

Et bien...j'ai vu plusieurs posts ou il sparlent de ce probleme, mais ça m'a l'air compliqué à rectifier...

Mais je crois que mon theme pose problème sur IE même sans le modifier...

Donc je ne sais pas trop quoi faire, c'est un peu embetant, pas mal de personne utilisent encore IE...

[Olivier CLEMENCE]

Il semblerait que le css du menu ne soit pas chargé sous IE.

http://essentiel71.fr/themes/thgr00027r/css/modules/blocktopmenu/css/superfish-modified.css

 

Essai de voir pourquoi.

Sinon copie le contenu de ce fichier dans le global.css voir si ça corrige le problème.

[micka7113]

Hum j'ai tenté de copier l’intégralité de ce que tu m'as donné...mais ça ne change rien...

[Olivier CLEMENCE]

si ça à changé, mais tu dois vider le cache de ton navigateur à chaque fois que tu fait des modifications dans les css.

 

Donc maintenant ton css est pris en comtpe vu qu'iol est dans le fichier global.css

par contre certaine image comme

background: transparent url(../img/bg_blocktopmenu.png) repeat-x 0 0;

ne fonctionne pas.

C'est normal car le chemin indiqué ici est relatif et comme le fichier global.css n'est pas dans le même dossier que superfish-modified.css les chemin relatif sont faux.

 

Il faut que tu regarde ton arborescence et corrige les chemins.

[micka7113]

Merci pour ta réponse, je pense avoir compris.

Voici comment je l'ai rectifié :

Global.css

 

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

background:transparent url("/www/themes/thgr00027r/css/modules/blocktopmenu/img/page-top.png") repeat-x scroll left bottom;

padding:8px;

height:186px

}

.sf-right {

margin-right: 14px;

float: right;

width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding:0 5px;

width:954px;/* 980 */

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

background: transparent url(/www/themes/thgr00027r/css/modules/blocktopmenu/img/bg_blocktopmenu.png) repeat-x 0 0;

-moz-box-shadow: 0px 3px 2px #c6c6c6;

-webkit-box-shadow: 0px 3px 2px #c6c6c6;

box-shadow: 0px 3px 2px #c6c6c6;

}

.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;

background: transparent url(/www/themes/thgr00027r/css/modules/blocktopmenu/img/bg_li_blocktopmenu.png) no-repeat 100% 0;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

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: 200px; /* 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: 0.5em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:34px;

border: 0;

text-decoration:none;

}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/

color: #fff;

white-space:nowrap;

}

.sf-menu li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu li li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: transparent url(/www/themes/thgr00027r/css/modules/blocktopmenu/img/bg_blocktopmenu_li_hover.png) repeat-x 0 0;

}

.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: #4e4e4e;

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: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('/www/themes/thgr00027r/css/modules/blocktopmenu/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: 11px;

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('/www/themes/thgr00027r/css/modules/blocktopmenu/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: inherit;

float: right;

line-height: 25px;

}

li.sf-search input {

-moz-border-radius: 0 5px 5px 0;

padding: 3px 0;

padding-left: 20px;

margin-top: 4px;

background: #fff url(/www/themes/thgr00027r/css/modules/blocktopmenu/img/search.gif) no-repeat left center;

}

 

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width:200px;

background:#726f72 !IE;

}

 

Tout n'est pas encore parfait...Problème dans le chemin des images..?!

[Olivier CLEMENCE]

oui ce n'est toujours pas bon.

met ça:

modules/blocktopmenu/img/bg_blocktopmenu.png

 

Par contre cette solution va finir par fonctionner mais sâche que ce n'est pas la meilleure.

Le mieux aurait été de comprendre pourquoi IE ne charge pas le css sh-modified.css et faire en sorte qu'il le charge.

Edited March 6, 2013 by maniT4c (see edit history)

[micka7113]

Yes ça marche !!!

Mais par contre le bas de la page est lui pas corrigé...

J'imagine qu'il faurt tout refaire mais cette fois-ci pour le footer?!

 

Ah et les images de produits ne s'affichent pas non plus.. :-/

Edited March 6, 2013 by micka7113 (see edit history)

[Olivier CLEMENCE]

A priori même problème mais cette fois avec ce fichier:

http://essentiel71.fr/themes/thgr00027r/css/modules/blockreinsurance/style.css

 

Ps: c'est une vrai catastrophe ce template . Y a des appel à des fichier css en plein milieu du code c'est vraiment pas génial.

[micka7113]

Cool ça marche :-)

Mais comment tu fais pour trouver d'ou ça vient...

J'ai tenté de comprendre ce que tu m'as dis d'ajouter à mon global.css ( le premier fichier)mais j'ai du mal a suivre..je suis assez novice..Désolé.

Bon il me reste plus qu'a corriger le problème des photos des articles...comment connaitre le fichier en question?!

[Olivier CLEMENCE]

Pour tes images, sous IE elles ont une largeur et hauteur de 1px c'est pour ça que tu les vois pas.

Je crois avoir vu des messages sur le forum à ce sujet. Tu devrais faire une recherche.

 

Sinon j'utilise le debugger de IE et Chrome pour repérer les erreurs (F12).

[Olivier CLEMENCE]

Si je me trompe pas la solution pour tes images est sur mon blog:

http://blog.manit4c.com/2013/01/22/mes-images-ne-saffiche-plus-sous-ie-avec-prestashop-1-5-3/

[micka7113]

Yes ça marche..

Enfin j'ai utlisé l'astuce de Lionel qui à écrit sur ton blog :

 

Lionel: Du coup au lieu de faire tout ça j’ai simplement renommé « default » en « default-old » et mon thème actuel en « default » et ça marche.

1000 mercis!

 

 

En tou cas, Merci beaucoup ManiT4C pour ton aide !!!!!

[Olivier CLEMENCE]

De rien