Internet Explorer: относительно позиционное расположение кнопок в абсолютно позиционированном окне - PullRequest
Новая
       37

Internet Explorer: относительно позиционное расположение кнопок в абсолютно позиционированном окне

0 голосов
/ 11 августа 2010

В IE7 моя кнопка примера заказа "#itmSampl" не выровнена по вертикали с кнопкой ".add-to-cart" слева от нее, хотя в FF3.6 и Chrome 5 она есть.Мне нужно, чтобы он был правильно выровнен в IE6-8.Кто-нибудь видит, что мне не хватает? 

<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>

Кроме того, вот тестовая страница, если визуальное помогает (вы должны войти в систему, чтобы увидеть кнопки вместо маркированного списка): http://www.avaline.com/85W_test_2Логин: test2@gmail.com Пропуск: test03

1 Ответ

1 голос
/ 11 августа 2010

Решение 1 : Поскольку вы уже используете много таблиц на своей странице, еще одна не повредит - просто измените ваш HTML с того, что у вас есть выше, на что-то вроде этого (может потребоваться несколькотвики): 

<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 -->

Решение 2 : уберите все "position: absolute" с помощью #itmSampl (уберите CSS bottom, position, right и, возможно, margin и height /свойства ширины).Затем добавьте CSS float: right; margin-top: -36px; в #itmSampl, чтобы он плавал справа и двигался вверх на 36 пикселей.

...