Internet Explorer: relatively positioned button alignment in absolutely positioned box - html

Question

In IE7, my order sample button "#itmSampl" isn't vertically aligned with the ".add-to-cart" button to the left of it, although in FF3.6 and Chrome 5 it is. I need it to be aligned correctly in IE6-8. Does anyone see what I'm missing?
<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"><img src="/images/img/add-to-cart.gif" alt="configure item"></div>
<div id="itmSampl"></div>
</div> <div class="clearfix"></div> </div>
Also, here's the test page if a visual helps (you have to login to see the buttons instead of the bulleted list): http://www.avaline.com/85W_test_2
Login:test2#gmail.com
Pass:test03

Answer 1

Solution 1: Since you are already using a lot of tables in your page, another one won't hurt - just change your HTML from what you have above to something like this (may require a few tweaks):
<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: Take away all the "position: absolute" stuff with #itmSampl (remove the CSS bottom, position, right, and maybe margin and height/width properties). Then, add CSS float: right; margin-top: -36px; to #itmSampl to make it float on the right and move upward 36 pixels.