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

[Univers des Petits]

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

[Univers des Petits]

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