Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Проблема BUTTON в таблице

Автор: Woody 12.5.2009, 11:00

Решил нарисовать красивую кнопочку, используя тэг BUTTON и фоновые картинки.

Идею позаимствовал http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors.

Всё бы ничего, но при задании аттрибута min-width в IE 7 кнопочки, помещённые внутрь таблицы ведут себя, прямо скажем, нехорошо (обрезаются самым безжалостным образом).

Минимальная ширина нужна, поскольку есть требование, чтобы кнопки с короткими надписями были не уже чем 75 пикселей.

Так и не понял, какими стилями можно заставить кнокпи показываться в таблице правильно под IE.

Эффект упоминается в приведённой ссылке (в обсуждении), но предлолженный там метод (задать кнопкам в таблице width:100%) не помогает при наличии min-width.

Код примера в прилагаемом архиве.

Может кто-то использовал этот подход и знает как бороться с кнопками в таблице?

Автор: bars80080 12.5.2009, 14:05

а большой min-width? попробуйте засунуть в ячейку div с шириной width, которая должна быть для min-width

Автор: Woody 13.5.2009, 09:43

Обернуть в div я пробовал. Не помогает, к сожалению.

Автор: bars80080 13.5.2009, 14:43

не обернуть в див, а внутрь того что не должно сужаться - вставить див с фиксированной шириной

Автор: Woody 13.5.2009, 15:08

Цитата(bars80080 @ 13.5.2009, 14:43

)

не обернуть в див, а внутрь того что не должно сужаться - вставить див с фиксированной шириной

Код


<button class="sipbutton" onclick="alert('pressed 1')">
<div style="width:75px">
<span>
New test of sliding doors<img height="9" width="9" class="imgr" src="icon.png"/>
</span>
</div>
</button>

Так?

Автор: bars80080 13.5.2009, 15:44

не,

Код


<button class="sipbutton" onclick="alert('pressed 1')">
<div><span>
New test of sliding doors<img height="9" width="9" class="imgr" src="icon.png"/>
</span></div>
<div style="width:75px">&nbsp;</div>
</button>

Автор: Woody 13.5.2009, 18:38

В результате решением оказалось

Код


<style>
.stub{
width:1px;
height:1px;
}

</style>
<button class="sipbutton" onclick="alert('pressed 1')">
<div class="stub"/>
<span>Test of a long value</span>
</button>

Разумного объяснения у меня этому нет. Сплошное шаманство. Причём работает одинаково хорошо в IE 7 и в FF 3