Problème d’affichage des attributs de Prestashop dans Internet Explorer

Aujourd’hui je suis confronté à un problème d’affichage des attributs (ou déclinaison) dans ma boutique Prestashop.

Exposé du problème d’affichage des attributs :

Voici ce que j’ai et qui va bien avec Firefox :

Voici l’affichage des mêmes données dans Internet Explorer 8 :

Comme on peut voir dans cet exemple, IE8 et Firefox ne réagissent pas du tout de la même façon. Dans les 2 cas, j’utilise le thème par défaut livré avec Prestashop.

Cela doit pouvoir se régler avec des CSS mais je ne suis pas un as du tout dans ce domaine.

Idées pour le CSS :

• Élargir la taille de la liste déroulante dans IE.
• Déplacer un peu vers la gauche  l’ensemble article et quantité de manière à laisser plus de place (en largeur) à la liste déroulante.
• Virer le mot “article” pour gagner de la place.

Sources de cette partie :

Code Html :

<!-- attributes -->
<div id="attributes">
<p>
<label for="group_1">Article :</label>
<select name="group_1" id="group_1" onchange="javascript:findCombination();">
<option value="22">8mm wei&szlig; / blau pro Meter</option>
<option value="47">10mm wei&szlig; / blau pro Meter</option>
<option value="2">10mm wei&szlig; / rot pro Meter</option>
<option value="28">10mm schwarz pro Meter</option>
<option value="9">12mm wei&szlig; / blau pro Meter</option>
<option value="3">12mm wei&szlig; / rot pro Meter</option>
</select>
</p>
</div>
<!-- quantity wanted -->
<p id="quantity_wanted_p">
<label>Menge:</label>
<input type="text" name="qty" id="quantity_wanted" class="text" value="1" size="2" maxlength="3" />
</p>

Solution trouvée :

Virer l’étiquette de l’attribut

Dans le fichier du thème product.tpl je vire la ligne #241 :

<label for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>

Utiliser 99% de la largeur pour #primary_block form#buy_block select

Dans global.css

Remplacer les lignes initiales (à partir de la ligne 1930)

#primary_block form#buy_block label,#primary_block form#buy_block select{
display:block;
width:47%;
float:left;
}

Par

#primary_block form#buy_block label{
display:block;
width:47%;
float:left;
}
#primary_block form#buy_block select{
display:block;
width:99%;
float:left;
}

Résultat sur l’affichage d’une déclinaison :