Jump to content

[Résolu] Problème CSS : Prix s'affiche en-dehors (en-dessous) du cadre sous IE, mais correct sous FF


Recommended Posts

Bonjour (Bonsoir) à tous,

Petit nouveau sous Prestashop (excellent produit !), je suis confronté à mon premier problème n'ayant pas trouvé de réponse dans ce forum. Ou alors, j'ai mal cherché (ce qui est possible).
Je me permet donc de créer un nouveau post. Si ce post fait double-emploi avec un autre, merci de le signaler et je fermerai celui-ci.

Voici mon souci : nous avons créé un "cadre" (sous forme d'image transparente) qui entoure chaque produit dans la liste
des produits d'une catégorie.
Celui-ci s'affiche correctement sous FF (Firefox), mais malheureusement sous IE (Internet Explorer), le prix, au lieu de s'afficher dans le cadre, s'affiche SOUS le cadre, et plus exactement est caché par le cadre du dessous.

Je suppose que ceci est en rapport avec la propriété "inline" ou "block" qui pose problème sous IE, mais étant un vrai débutant en positionnement CSS, je ne sais pas trop où chercher...

Une image étant plus claire qu'une longue (tentative de) description, je joint une capture d'écran du problème (et une autre du résultat désiré).
A gauche, Firefox et le résultat correct. A droite, Internet Explorer et le souci...

Un tout grand merci à tous pour votre aide.

Raphaël

7602_68nVo0oBNVayOdVJIQ2w_t

7603_WpUAv9RFv2iePIZ87s2d_t

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Bonsoir,
Bon... eh bien puisque personne ne me répond, je me répond à moi-même :-)
J'ai finalement résolu le souci en utilisant un autre code css, et aussi en utilisant des valeurs fixes (en px) pour largeur et hauteur, au lieu de pourcentages. Apparement, les % sont déconseillés dans ce cas précis car justement mal gérés par IE.
Je ne suis pas un pro du css, donc si un pro passe par là et peut confirmer/infirmer ceci et donner plus d'explications, je suis preneur.

Voici le code que j'ai utilisé pour que ça fonctionne (voir thread : http://www.prestashop.com/forums/viewthread/3023/ pour plus d'infos) :
(dans le global.css)

/* product-list.tpl */
ul#product_list{ list-style-type:none; }
ul#product_list li {
float: left;
padding: 0px;
width:200px;
height:160px;
margin-bottom:1em;
}

--> Il faut éventuellement "jouer" avec les valeurs width et height, en fonction de votre mise en page à vous.

Pour avoir l'affichage sur 4 colonnes au lieu de 3, divisez la largeur totale de votre "bloc" par 4 et mettez cette valeur en width.
Exemple : si votre bloc fait 600px, mettez 150px en width.
(Et 300 pour 2 colonnes, vous avez compris le principe ;-) )

Bonne soirée.
Raphaël

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