Резиновые кнопки

[XprogeR]

Доброго времени суток, сложилась интересная ситуация:

Код HTML:

<td id="buttons">

<div class="button_left">

<div class="button_right">

<div class="image_div">

<div class="button_content">

Текст кнопки

</div>

<img src="./images/arrow.png" alt="" class="button_icon"/>

</div>

</div>

</div>

</td>

Код CSS:

#buttons{

}

.button_left{

background: url(../images/button_left.png) no-repeat left;

height: 28px;

color: white;

margin-left: 3px;

float: left;

}

.button_right{

background: url(../images/button_right.png) no-repeat right;

height: 28px;

color: white;

}

.button_content{

background: url(../images/button_mid.png) repeat-x;

height: 28px;

font-size: 120%;

color: white;

padding: 0 10px;

padding-top: 4px;

float: left;

}

.image_div{

background: url(../images/button_mid.png) repeat-x;

margin: 0px 4px;

height: 28px;

overflow: visible;

}

.button_icon{

text-decoration: none;

margin-top: 10px;

border: none;

}

Код java script:

if($.browser.webkit==undefined){

$(".image_div").each(function(){

$(this).css("width",$(this).innerWidth()+"px");

$(this).css("min-width",$(this).innerWidth()+"px");

});

}

Проблема заключается в том что при слишком узком окне изображение находящиеся в .image_div вылетает за пределы дива и создается эффект как будто на кнопках нет этой "иконки", подозреваю это случается из-за того что явно не задана ширина дива. В Chrom и Safari это можно побороть используя свойство overflow, но в остальных браузерах приходиться извращаться прибегая к скрипту, а именно, устанавливать размер картинки явно.

Проблема которую нужно решить: У заказчика по какой-то причине эти злосчастные кнопки все равно исчезают! 0_о...

Я конечно понимаю экстрасенсов здесь нет но я уже скоро с ума сойду, подскажите хоть что-то! =(

UPD: Решение пришло пока писал тему, пошел проверил работает:

Код java script:

if($.browser.webkit==undefined){

$(".image_div").each(function(){

$(this).css("width",$(this).innerWidth()+"px");

$(this).css("min-width",$(this).innerWidth()+"px");

if($(window).width() <= 1024){

$(this).css("width",($(this).innerWidth()+12)+"px");

$(this).css("min-width",($(this).innerWidth()+12)+"px");

}

});

}

Дело в том что если разрешение слишком маленькое, то страница формируется с уже существующим багом и нужно увеличить ширину дива с картинкой для того, чтоб она стала на место.

Edited November 5, 2010 by XprogeR

[ZI DAN]

Можно было попробовать min-width для страницы задать.

[XprogeR]

Можно было попробовать min-width для страницы задать.

В том-то все и дело что задан, но все равно возникает эта ошибка, скорее всего в большом кол-ве кода что-то упустил.

Edited November 5, 2010 by XprogeR

[ZI DAN]

скорее всего в большом кол-ве кода что-то упустил

Не обязательно. Когда мне дизайнеры в первый раз притащили вёрстку на jQuery, с ней тоже возникли проблемы в некоторых браузерах. Я немного покопался, а потом удалил весь jQuery и больше никогда им не пользовался.

[mishka]

Вы что сума сошли скриптом такие вещи делать? Это чисто верстка.

Не обязательно. Когда мне дизайнеры в первый раз притащили вёрстку на jQuery, с ней тоже возникли проблемы в некоторых браузерах. Я немного покопался, а потом удалил весь jQuery и больше никогда им не пользовался.

странно звучит вёрстка на jQuery. Это как?

чтото типа

jQuery('#header').css({
	width: '100%',
	overflow: 'hidden',
	position: 'relative',
	zIndex: 10
})

Так чтоли?

Ну JS не для этого предназначен (jQuery в частности)

У меня, как выразился s0rr0w, jQuery головного мозга я покорен этой библиотекой. Главное правильно применять, впрочем как и всё.

Edited November 5, 2010 by mishka2

[XprogeR]

Вы что сума сошли скриптом такие вещи делать? Это чисто верстка.

странно звучит вёрстка на jQuery. Это как?

чтото типа

jQuery('#header').css({
	width: '100%',
	overflow: 'hidden',
	position: 'relative',
	zIndex: 10
})

Так чтоли?

Ну JS не для этого предназначен (jQuery в частности)

У меня, как выразился s0rr0w, jQuery головного мозга я покорен этой библиотекой. Главное правильно применять, впрочем как и всё.

Я с вами абсолютно согласен, но в днном случае я не нашел более подходящего решения. Тем боле использование JS в вёрстке в общем я старюсь минимизировать так как считаю это совсем не правильным подходом, но бывают такие ситуации что по другому не выкрутишься, спасибо нашим доблестным программистам браузеров, ну или кому там.