[RESOLU] Affichage different entre IE et FIREFOX

[depotcenter]

Bonjour,

Constatez par vous même ...

www.depotcenter.fr

La difference est flagrante entre les deux navigateurs !!

[clemclem]

Bonjour,

Peux tu préciser les versions des navigateurs ? surtout IE

[depotcenter]

IE 8.0
et
FIREFOX 3.6

[clemclem]

Ok
je n'ai vu que deux choses différentes, le footer et la barre de menu horizontale.
Pour le footer, tu as mis un border radius pour avoir les bords arrondis mais je ne crois pas que IE le gère. La solution serait de faire un background avec les bords arrondis.

Pour la barre de menu horizontale, c'est l'image de fond qui n'apparait pas. Essaye de voir dans le superfish-modified.css de le rajouter là.

c'est tout ce que j'ai pu constater comme différences...

[depotcenter]

En fait la difference la plus falgrante est la barre de menu horizontal ! est c'est ca que je veux changer !

J'ai pas vraiment compris la manipulation !!..

Merci

[clemclem]

en gros, dans le superfish-modified.css (qui se trouve dans module > blocktopmenu > css) il te faut rajouter le background. Ce css gère l'affichage de ta barre horizontale.
Cherche la ligne .sf-menu et rajoute background:transparent url(../urldetonimage) repeat-x scroll 0 0

A tester !

[depotcenter]

Il y à beaucoup de .sf-menu:
Voici le code directement !

/*** ESSENTIAL STYLES ***/
.sf-contener {
clear: both;
margin: 10px 0;
height: 30px;
line-height: 30px;
padding-left: 0px;
padding-top:20px;
}
.sf-right {
margin-right: 14px;
float: right;
width: 7px;
}
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
float: left;
width: 952px;
line-height: 1.2;
}
.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: 99;
}
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;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #374853;
}
.sf-menu li li {
background: #ebebed;/*#AABDE6;*/
}
.sf-menu li li li {
background: #ebebed;/*#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: transparent url(../img/blocktopmenu_hover.gif) repeat-x; <-- (C'est ici que ca se passe! et c'est deja mis!!!!!)}
.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: #d0d3d8;
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: .8em;
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: inherit;
float: right;
line-height: 25px;
}
li.sf-search input {
-moz-border-radius: 0 5px 5px 0;
padding: 3px 0;
padding-left: 8px;
margin-top: 4px;
background: #fff url(../img/search.gif) no-repeat left center;
}

[clemclem]

ça va se passer dans les deux premiers :

.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none;
}
.sf-menu { float: left; width: 952px; line-height: 1.2;
}

rajoute le background, ce qui donne au final :

.sf-menu, .sf-menu * {
   margin:            0;
   padding:        0;
   list-style:        none;
       background : transparent url(../img/blocktopmenu.gif) repeat-x scroll 0 0;
}
.sf-menu {
 float: left;
 width: 952px;
   line-height:    1.2;
   background : transparent url(../img/blocktopmenu.gif) repeat-x scroll 0 0;

[depotcenter]

Merci ca à corrigé le problème, c'est cool !!!

en y pensant, j'ai un autre souci d'affichage, ca concerne les produit en promotion sur la page d'accueil ....
voir imprim ecran

[clemclem]

dans le global css vérifie qu'il y a bien ça :

  .produit-contenu-promo {
   background:url(../img/promo.gif)no-repeat top right;
   margin-top:-20px;
   height:140px;
 }

[depotcenter]

Oui il y à bien ces lignes dans mon global.css

[clemclem]

Bizarre, il n'apparait pas sous IE. J'ai essayé de faire une modif de ton global, tu le trouveras joint au message. Remplace ton global.css par celui qui est joint et dis moi ce qu'il en est (fais une sauvegarde de ton global.css avant de faire l'opération!)

Fichier à renommer global.css biensur

global.css.txt

[depotcenter]

C'est bon ca fonctionne !
T'est toujours op ClemClem !!

Mercii

[clemclem]

Cool tant mieux
Bon courage pour la suite


EDIT : juste un petit truc pour que le menu soit un peu plus lisible, à la ligne 33 du superfish-modified.css, à .sf-menu ul li essaye en mettant la valeur 200px au width (qui est actuellement à 100%). La ligne sera plus large et du coup tout ton texte rentrera.

[depotcenter]

Merci Clem

Tu as un site web? tu vend quoi?

[clemclem]

en fait j'ai juste fait un site pour mon frère et j'aime bien bidouiller et aider un peu quand je sais, voila tout

[depotcenter]

Ben bravo alors.

Prestashop c'est bien, mais jtrouve que c'est un peu leger qd mm.
Peut etre en changeant le theme ca pourrait faire plus design, mais là jle trouve un peu lèg.

[clemclem]

Tu parles du thème prestashop ?
Tu as la possibilité d'acheter des thèmes qui sont pas très onéreux et très bien fait, en plus réalisés par des membres du forum (Divine, ArtDesign, DG.craft...) qui sont présents. Je pense que c'est un petit investissement qui est très important !

[depotcenter]

Oue c'est sur! jvien dlancer mon site ca va faire environ 1mois et demi, en attendant jv laisser le theme par default.
Mais c'est sur qu'un jour viendra où je vais le changer !!