Internet Explorer: alignement des boutons relativement positionné dans une case absolument positionnée

Question

Dans IE7, mon bouton d'échantillon de commande "#itmSampl" n'est pas aligné verticalement avec le bouton ".add-to-cart" à gauche, bien que dans FF3 .6 et Chrome 5 c'est. J'ai besoin qu'il soit aligné correctement dans IE6-8. Est-ce que quelqu'un voit ce que je manque?

<style type="text/css"> 
#buttonbox { position:relative; width:326px; } 

#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; } 
#accounting #box-accounting .image-item .content-account 
#ordrWizrd { float:left; height:24px; width:111px; } 
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; } 
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style> 

<div id="buttonbox"> 
    <div id="addtocart2" class="add-to-cart"> 
    <table><%=getCurrentAttribute('item','addtocarthtml')%></table> 
    </div> 
    <div id="ordrWizrd" class="add-to-cart"><a href="javascript:shwWizd()"><img src="/images/img/add-to-cart.gif" alt="configure item"></a></div>  
    <div id="itmSampl"></div> 
    </div> <div class="clearfix"></div> </div> 

De plus, voici la page de test si un visuel aide (vous devez vous connecter pour voir les boutons au lieu de la liste à puces): http://www.avaline.com/85W_test_2 Login: test2@gmail.com Pass: test03

Answer 1

Solution 1: Puisque vous utilisez déjà beaucoup de tables dans votre page, un autre ne fera pas mal - il suffit de changer votre code HTML de ce que vous avez ci-dessus pour quelque chose comme ça (peut nécessiter quelques modifications):

<div id="buttonbox"> 
    <div id="addtocart2" class="add-to-cart"> 
     <table><tr> 
      <td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td> 
      <td valign="bottom"><div id="itmSampl"></div></td> 
     </tr></table> 
    </div> 
    <div class="clearfix"></div> 
</div> 
<!-- And also put #ordrWizrd in there somewhere --> 

Solution 2: Supprimez tous les éléments "position: absolute" aveC#itmSampl (supprimez les propriétés CSS bottom, position, right, et éventuellement margin et height/width). Ensuite, ajoutez CSS float: right; margin-top: -36px; à #itmSampl pour le faire flotter sur la droite et remonter de 36 pixels.