Тянущийся бэкграунд для элементво списка

[9EVIL]

Всем привет. Такая проблема, вожусь уже дня 2, полностью вынесло мозг.

Есть такое меню (на картинке максимальный результат, которого мне удалось достигнуть, и то только в опере и файерфоксе).

нужно чтобы в активном классе фоновое изображение проклятое растягивалось или сжималось, т.е. как ту на карттинке оно хорошо отображалось как в ие6 и ие7 так и современных браузерах.

вок код:

<div class="colproduct">

<ul>

<li class="colprtext">Отображать товары по:</li>

<li class="cpactive"><b> </b><i><span> 4 </span></i><em> </em></li>

<li><a href="#" title="40">40</a></li>

<li><a href="#" title="400">400</a></li>

<li><a href="#" title="4000">4000</a></li>

<li class="cpactive"><b> </b><i><span> 40000 </span></i><em> </em></li>

<li><a href="#" title="все">все</a></li>

</ul>

</div>

.colproduct {

background:url('bgcol.gif') no-repeat;

width:775px;

height:35px;

margin:15px 0;

padding:1px;

}

li.cpactive {

font-size:23px;

}

li.cpactive b {

background: url('bgleft.gif') no-repeat;

font-size:19.5px;

}

li.cpactive em {

background:url('bgright.gif') no-repeat;

font-size:20px;

}

li.cpactive i {

background:url('bgxerna.gif') repeat-x;

font-size:20px;

}

li.cpactive span{

font-size:10px;

}

.colproduct ul {

margin:1px 0 0 17px;

height:18px;

}

.colproduct ul li a {

font-size:11px;

}

.colproduct ul li {

display: inline;

padding:3px 8px;

}

.colproduct ul li.colprtext {

padding:0;

}

li.colprtext {

font-size:11px;

}

это жесть, я уже скоро убьюсь с этой штукой.bgxerna.gif

[hypnocolor]

А зачем вообще здесь картинки использовать? Задайте для .cpactive белый фоновый цвет, подходящий padding и border-radius в 2 или 3 пикселя, и уберите все фоновые картинки нафиг.

Edited April 6, 2012 by hypnocolor

[9EVIL]

Я бы с огромным удовольствием так сделал, но нужно именно изображениями. Бордер радиус не работает в ие 6 и 7 тем более он является невалидным.

Пока даже в опере и фаерфоксе последних одинаково сделать не получилось, про ие вообще писать не хочется. (((

[hypnocolor]

9EVIL, я бы на вашем месте вообще забил на такие мелочи для IE6/7. Или без этого прямо никак-никак нельзя обойтись? Тогда советую посмотреть на технику, используемую в «Студии Лебедева» — http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/.

[9EVIL]

я бы с радостью забил бы, но в данном случае это важный момент и нужно сделать именно так. Спасибо! Буду смотреть!

[9EVIL]

Может кто еще сталкнется с такой проблемой, я ее всетаки решил, все кроссбраузерно и валидно:

<div class="colproduct">

<ul>

<li class="colprtext">Отображать товары по:</li>

<li class="cpactive"><a><span>4</span></a></li>

<li><a href="#" title="40">40</a></li>

<li><a href="#" title="400">400</a></li>

<li><a href="#" title="4000">4000</a></li>

<li class="cpactive"><a><span>40000</span></a></li>

<li><a href="#" title="все">все</a></li>

</ul>

</div>

.colproduct {

background:url('bgcol.gif') no-repeat;

width:775px;

height:35px;

margin:15px 0;

padding:1px;

}

li.cpactive {

font-size:23px;

}

li.cpactive a {

text-decoration:none;

color:#000;

display:block;

float:left;

background:url('spritecolbg.gif') 0px -23px no-repeat;

padding:0px 0px 0px 6px;

line-height:22px;

}

li.cpactive a span {

display:block;

line-height:20px;

padding:0px 10px 1px 0px;

background:url('spritecolbg.gif') 100% 0px no-repeat;

}

.colproduct ul {

margin-top:3px;

height:18px;

}

.colproduct ul li a {

font-size:11px;

}

.colproduct ul li {

display: inline;

padding:3px 8px;

float:left;

}

.colproduct ul li.colprtext {

padding:0;

font-size:11px;

padding-top:7px;

}