Jump to content

[RESOLU] Affichage different entre IE et FIREFOX


Recommended Posts

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

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
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
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More