Проблема с overflow

[Sidoruk_sv]

Задача сделать фоновую картинку которая будет вылазить за пределы первого li.

<ul>
	<li class="widget widget_text" id="text-3">
    	<h3 class="widgettitle">Обратная связь</h3>            
    	<div class="textwidget">
        	<div id="wpcf7-f1-w1-o1" class="wpcf7">
            	<form class="wpcf7-form" method="post" action="/#wpcf7-f1-w1-o1">
                	<div style="display: none;">
                    	<input type="hidden" value="1" name="_wpcf7">
                    	<input type="hidden" value="2.4.5" name="_wpcf7_version">
                    	<input type="hidden" value="wpcf7-f1-w1-o1" name="_wpcf7_unit_tag">
                	</div>
                	<p>Ваше имя:<br>
                    	<span class="wpcf7-form-control-wrap your-name"><input type="text" title="" size="28" class="wpcf7-text wpcf7-validates-as-required wpcf7-use-title-as-watermark watermark" value="" name="your-name"></span></p>
                	<p>Ваш E-Mail:<br>
                    	<span class="wpcf7-form-control-wrap your-email"><input type="text" title="example@domen.com" size="28" class="wpcf7-text wpcf7-validates-as-email wpcf7-validates-as-required wpcf7-use-title-as-watermark watermark" value="" name="your-email"></span></p>
                	<p>Тема сообщения:<br>
                    	<span class="wpcf7-form-control-wrap your-theme"><select class="wpcf7-select wpcf7-validates-as-required" name="your-theme"><option value="—">—</option><option value="Сообщить о неполадке">Сообщить о неполадке</option><option value="Сделать заказ">Сделать заказ</option><option value="Вопрос по поводу сотрудничества">Вопрос по поводу сотрудничества</option><option value="Другое">Другое</option></select></ span></p>
                	<p>Ваше сообщение:<br>
                    	<span class="wpcf7-form-control-wrap your-message"><textarea title="Введите сюда ваше сообщение" rows="7" cols="25" class="wpcf7-validates-as-required wpcf7-use-title-as-watermark watermark" name="your-message"></textarea></span></p>
                	<p><input type="submit" class="wpcf7-submit" value="Отправить"><img src="/images/ajax-loader.gif" alt="Отправка..." style="visibility: hidden;" class="ajax-loader"></p>
                	<div class="cf-images"></div>
                	<p style="font-size:90%"> <br>* все поля обязательны для заполнения</p>
                	<div class="wpcf7-response-output wpcf7-display-none"></div>
            	</form>
        	</div>
        	<div class="thanks">Спасибо за внимание </div>
    	</div>
	</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

CSS для li (style.css):

#footer #text-3 {
    float: right;
	margin: 0 0 0 15px;
	overflow: visible !important;
	width: 225px;
    background:url("images/contact_form_bg.png") no-repeat scroll 0 250px transparent;
}

#footer .widget {
	float: left;
	font-family: Georgia;
	font-size: 12px;
	line-height: 18px;
	list-style: none outside none;
	padding: 20px 0 0;
	text-decoration: none;

Проблема состоит в том, что при любом "overflow:" картинка все равно обрезается по краям li

Edited May 30, 2011 by Sidoruk_sv

[psywalker]

:after

[Azadi]

Что мешает сделать первую li большей ширины + padding, чтобы картинка "вылазила" за пределы элемента списка?

З.Ы. А давайте введём моду делать работающий прототип примера в http://jsfiddle.net/ и давать ссылку на него? :-)

[psywalker]

З.Ы. А давайте введём моду делать работающий прототип примера в http://jsfiddle.net/ и давать ссылку на него? :-)

Да, дельное предложение, приму к сведению, спасибо

[Sidoruk_sv]

Что мешает сделать первую li большей ширины + padding, чтобы картинка "вылазила" за пределы элемента списка?

Все li выровненны так, что по ширине как раз по размеру footer-wpapper-а, слева от li сразу же идет ещё один, справа - край footer-wpapper-а. В wordpresse позиции виджетов организованы через ul>li потому и приходиться через идентификаторы играться с их позициями. Но что бы overflow:hidden намертво стоял, такого ещё не встречал.

Тоесть надо сделать так что бы бэкграунд вылазил и за footer-wpapper (там overflow:visible тоже прописан). и под соседние li

З.Ы. А давайте введём моду делать работающий прототип примера в http://jsfiddle.net/ и давать ссылку на него? :-)

Конструкция получается сложноватая потом не могу сгенерить код, как тольок будет время слеплю.

Пока что только на продакшене есть, выхода в глобальную нет, в целях безопасносит

Edited May 30, 2011 by Sidoruk_sv

[Azadi]

Без примера не могу себе представить в чем проблема, извиняйте.

[psywalker]

Что мешает сделать первую li большей ширины + padding, чтобы картинка "вылазила" за пределы элемента списка?

Все li выровненны так, что по ширине как раз по размеру footer-wpapper-а, слева от li сразу же идет ещё один, справа - край footer-wpapper-а. В wordpresse позиции виджетов организованы через ul>li потому и приходиться через идентификаторы играться с их позициями. Но что бы overflow:hidden намертво стоял, такого ещё не встречал.

Тоесть надо сделать так что бы бэкграунд вылазил и за footer-wpapper (там overflow:visible тоже прописан). и под соседние li

З.Ы. А давайте введём моду делать работающий прототип примера в http://jsfiddle.net/ и давать ссылку на него? :-)

Конструкция получается сложноватая потом не могу сгенерить код, как тольок будет время слеплю.

Пока что только на продакшене есть, выхода в глобальную нет, в целях безопасносит

Я дал тебе пищу для размышления, а ты проигнорил её. Жаль.