(RÉSOLU) Décalages IE8 ???

[pacosxm]

Voilà, j'arrive sur la fin de mon premier site Prestashop, après avoir passé un temps considérable pour essayer de comprendre comment le personnalisé, le peaufiner, etc...
Testé en permanence sous Mac avec Safari, Camino, Google Chrome et Firefox... pas de problème.

Puis un pote passe avec son PC et Internet Explorer 8 et là c'est le drame !
Image du Header (header client pour moi) décalé, recherche et infos clients décalés, produits phares décalés, etc...
Je lui fait télécharger Google Chrome et là aucun soucis d'affichage.

Qu'est-ce qui fait que ce navigateur soit le seul a poser des problèmes ?
Y a t'il une recette miracle pour régler ces problèmes d'affichage ?

J'ai lu quelques posts qui traitent des div ou d'une confusion entre les margin et les padding, mais je suis un peu largué a ce niveau là.

(EDIT) la phrase du dessous est inutile puisque le post est résolu, mais croyez moi c'était pas top...
Pour jouer au jeu des 7 erreurs ouvrez IE8 et n'importe quel autre navigateur : http://www.buscosxm.com/shop/

[YopixelAE]

Bonjour, à mon avis pas de recette miracle, ce n'est pas juste une question de margin/padding.
Il ne faut jamais oublier de tester sur IE pendant la création, parce que maintenant tu vas passer autant de temps pour corriger ton thème que tu en as mis pour le créer !

[pacosxm]

Ben oui, mais sous Mac on a pas Internet Explorer... on ne s'en plaint pas d'ailleurs !

[YopixelAE]

Il te faudrait un émulateur, parce que là c'est dommage les troubles le site est chatoyant au demeurant.
La bonne nouvelle c'est que ça ne semble pas être grand chose, principalement des clear:both manquant sur certaines div.
Pour le problème des produit phares, les règles par défaut du global.css donnent quoi ?

[pacosxm]

en fait je suis sous PS 1.3.1 et j'ai beaucoup modifier un theme DDLX (presta dolphin).
donc mes .tpl sont déjà modifier par DDLX ainsi que mon global.css

je vais te retrouver mon passage du global.css / produit phares

[pacosxm]

voilà le sujet...

/*#center_column .products_block li.last_item { float:none; clear:both; }*/
#center_column .products_block li.last_item_of_line { border-right:none; }
#center_column .products_block li.first_item_of_line { clear:both; }
#center_column .products_block li.last_line { border-bottom:none; }
#center_column .products_block p, #center_column .products_block h5 { margin: 0.5em 0.1em; }
#center_column div.products_block h5 {
display: block;
height: 2.5em;
}
#center_column div.products_block h5 a {
color: #974b00; */COULEUR TITRE PRODUCT DANS PRODUITS PHARES*/
font-size:1.1em;
}
#center_column div.products_block ul li p {
margin:0;
padding:0;
}
#center_column div.products_block p.product_desc {
height:9.5em;
color: #000000;
}
#center_column div.products_block a.product_image {
display: block;
background-color: transparent;
width: 129px;
height: 129px;
margin-left:2px;
}
#center_column div.products_block a.product_image img{
float:none;
margin:0;
}
#center_column div.products_block p.product_desc, #center_column div.products_block h5 {
margin-left:0.6em;
margin-right:0.6em;
text-align: center;
}
#center_column div.products_block ul li p.product_desc a { font-weight:normal; }
#center_column div.products_block ul li p.product_desc a:hover { color:#ffffff; }
#center_column .products_block span.price {
text-align: center;
font-size: 1.6em;
padding: 0.5em 0;
display: block;
}
#center_column .products_block a.button, #center_column .products_block a.exclusive, #center_column .products_block span.exclusive {
margin: 0.5em auto;
}

/* Special style for block accessories in center column (product page) */
#center_column .products_block.accessories_block .block_content{ background:none; }
#center_column div.products_block.accessories_block p.product_desc { height:6.5em; }
#center_column .products_block.accessories_block .block_content li{ background:none; }
#center_column .products_block.accessories_block .block_content li a.product_image{ border-right:1px solid #e2001a; }
#center_column .products_block.accessories_block .block_content li.last_item a.product_image{ border:none; }

mais j'ai vraiment un peu de mal à tout saisir... d'ailleurs suis-je au bon endroit ?
Pourquoi tout modifier pour un seul navigateur ?
Tant de questions se posent à moi... le "burn out" se rapproche... (biz aux cousins).

je me suis rajouté pas mal de */ commentaires */ sur le global.css pour les couleurs et le design.
c'est encore en test, mais je le publierais prochainement dans le section appropriée...

[pacosxm]

La bonne nouvelle c'est que ça ne semble pas être grand chose, principalement des clear:both manquant sur certaines div.
Pour le problème des produit phares, les règles par défaut du global.css donnent quoi ?

Si tu me donne un peu plus de détails... savoir quoi modifier, je prend...

ps : j'ai oublier de préciser que j'utilise des modules annexes : addblock de SotEw et blocklangcurr, le premier peu influer sur la mise en page IE8 (top header), mais pas le deuxième (right column)

[pacosxm]

Bon, je reste toujours dans le flou le plus total.
Si j'effectue des modifications, genre remonter mon image de fond des infos client pour quelle soit ok sur IE8, évidemment elle se retrouve trop haut sur tous les autres navigateurs.

Je n'arrive pas a m'expliquer ce problème, si mon code est bon pour tous les autres navigateurs, pourquoi serait-il faux pour IE8 ? Le code n'est-il pas une science exacte ?

Si une bonne âme pouvait me mettre sur la voie...

[pacosxm]

J'ai finalement trouver une solution en fouillant la toile et le forum...
j'utilise le hack "!important" qui permet d'envoyer des lignes de code différentes à IE8 et aux autres navigateurs.

Ex pour mon image de fond header info client

#header {
   background: #FFDA8D url(../img/headerclient.png) no-repeat center top; /* FOND HEADER 2 */
   float:left;    
   height:75px;
   width: 1000px;
   text-align: right;
   margin-top: 0px!important;
   margin-top: -22px;

ce qui me permet de n'avoir aucun décalage margin-top pour tous les navigateurs, mais un décalage margin-top de -22px pour IE8 et donc placer correctement mon image.
Je n'ai plus qu'a faire le tour de mes problèmes un par un et les corriger pour IE8.

[YopixelAE]

Ai pas reçu les notifications dslé Bien joué si tu y parviens avec seulement un ajustement des margins, tu dois t'amuser au pixel près !
En tout cas c'est bien parti, sous ie7 ça passe bien, good job.

[pacosxm]

Ai pas reçu les notifications dslé Bien joué si tu y parviens avec seulement un ajustement des margins, tu dois t'amuser au pixel près !
En tout cas c'est bien parti, sous ie7 ça passe bien, good job.

En effet, je bidouille au pixel près entre mon Mac avec Firefox et un PC portable avec IE8, mais je suis vraiment content de solutionner ce problème qui m'a mis, je dois l'avouer un gros coup de blues hier.

Au passage, j'ai encore une bricole que je n'arrive pas à régler :
je ne m'explique pas le petit décalage sous IE8 dans mon header User Info au niveau du contenu du panier (vide)... si quelqu'un a une idée ou chercher, j'ai fais des essais dans le global.css mais rien n'y fait sous IE8.