как сделать резиновую кнопку валидную под ие7

[kent666]

Всем привет. Помогите пожалуйста. столкунлся с такой проблемкой. Поручили мне сделать шаблон кнопки (резиновой) фактически состоящей из 3-х частей

1) это левая часть в ней рисунок вида <

2) резиновая часть для текста

3) правая часть с рисунком вида <

То есть условно <:текст:<

Хотел я это сделать 3-мя блоками внутри главного блока 3 блока с float: left

все как бы нормально за исключением того что в ИЕ 3 вложенные блока переносяться каждый на отдельную строку

Прочитал в нете что это глюк ИЕ7 что он не правильно считает ширину родительского блока

В результате пришлось верстать ТАБЛИЦЕЙ.

Вот что то на подобии

<button id="basket_checkout" class="button" name="checkout" type="submit">
<table>
  <tbody>
    <tr>
      <td class="left-side"></td>
      <td class="middle-side">Checkout</td>
      <td class="right-side"></td>
   </tr>
  </tbody>
</table>
</button>

css

button.button {
    border: none;
    background: transparent;
    margin: 10px;
    float: right;
    cursor: pointer;
    padding: 0;
}

button.button table {
    border: none;
    padding: 0;
}

button.button table td.left-side {
    background: url('../img/submit-left.png') no-repeat;
    width: 11px;
}

button.button table td.middle-side {
    background: #7F8B69;
    height: 29px;
    color: #fff;
    font-size: 14px;
    vertical-align: middle;
    padding: 0 5px;
    text-transform: uppercase;
}

button.button table td.right-side {
    background: url('../img/submit-right.png') no-repeat;
    width: 11px;
}

button.button:hover table td.left-side {
    background: url('../img/submit-left-hover.png') no-repeat;
}

button.button:hover table td.middle-side {
    background: #695C4E;
}

button.button:hover table td.right-side {
    background: url('../img/submit-right-hover.png') no-repeat;
}

подскажите как это можно правильно а главное валидно под ИЕ7 сделать при помощи блоков.

Заранее спасибо за то что уделили своё время

[RK-007]

Покажи код того, что делал(блочно), залей архив на файлообменник. Тогда и посмотрим.

[kent666]

вот вариант который был изначально (блочный)

<button class="button" type="submit">
    <div class="left-side"></div>
    <div class="middle-side">Add to cart</div>
    <div class="right-side"></div>
</button>

и css

button.button {
    border: none;
    background: transparent;
    margin: 10px;
    float: right;
    cursor: pointer;
    padding: 0;
    z-index: 1;
    //min-width: 150px; /*  hack for IE7  */
}
button.button div.left-side {
    background: url('../img/submit-left.png') no-repeat;
    width: 11px;
    border: none;
    padding: 0;
    float: left;
    height: 29px;
}

button.button div.middle-side {
    background: #7F8B69;
    height: 23px;
    color: #fff;
    font-size: 14px;
    min-width: 20px;
    padding: 6px 5px 0 5px;
    border: none;
    float: left;
}

button.button div.right-side {
    background: url('../img/submit-right.png') no-repeat;
    width: 11px;
    border: none;
    padding: 0;
    float: left;
    height: 29px;
}

button.button:hover div.left-side {
    background: url('../img/submit-left-hover.png') no-repeat;
}

button.button:hover div.middle-side {
    background: #695C4E;
}

button.button:hover div.right-side {
    background: url('../img/submit-right-hover.png') no-repeat;
}

В ИЕ7 ширина родительского блока не корректно считаеться, по этому я приделал костылик //min-width: 150px; /* hack for IE7 */