Интересная задача по CSS

Всем доброго дня!
Делаю меню и задумался над одним моментом.
Есть вот такая вот структура элемента меню:

<li>
<a href="#">Пункт меню</a>
<i class="tm_left"></i>
<i class="tm_right"></i>
</li>

предполагается, что .tm_left и .tm_right - это боковой фон, хранимый в png файле (спрайт). Фон сердцевины задан у элемента li (ну или в ссылке, которая является блочной - не важно это).
Так вот происходит наложение png слоев друг на друга (т.е. боковых фонов на фон li). При этом оч некрасиво получается - фон меняется в месте, где происходит наложение.
Сразу скажу, что margin у ссылки использовать нельзя - ширина бокового фона не позволяет.
Помогите пожалуйста.

Можно в самом спрайте их раздвинуть между собой, оставить между ними прозрачный фон.

P.S Или я неправильно задау понял..

В спрайте 3 вида фона (применительно к меню): фон левой части, фон правой части и фон центральной (который повторяется по оси x).
Т.е. не получится Ваш вариант.
Пока сделал еще один абсолютный слой внутри и растянул его с помощью left и right. И ему задал этот фон центральный.
Но это не работает в IE-6 по понятным причинам.

Вы бы на живом пациенте показали, тут пощупать надо, а не пальцем в небо тыкать

Да, согласен, что без живого примера сложно - нет у меня пока такой возможности, к сожалению.

В кратции, у меня проблема в том, что один слой с одним фоном (png) налазиет на другой слой с другим фоном (тоже png) и в итоге они дают другой фон - затемненный, что вполне нормально, т.к. png прозрачные в данном случае.

MaratMaratMarat, ну вот как получится у вас показать, тогда и решение подскажу

Возможно

<a href="#"><ins>Пункт меню</ins></a>

<i class="tm_left"></i>

<i class="tm_right"></i>

ссылке position:relative; padding-left, padding-right по ширине .tm_left,.tm_right
для ins display:block и фон
для .tm_left,.tm_right position:absolute и фон

но.. непонятно почему не подходит margin) можно и с margin, и отрицательными position для боковых

Спасибо, но не пойдет, т.к. боковые слои с фоном слишком широкие (по 25 пикселей каждый) и получается, что пункт меню увеличивается слишком сильно за счет падингов для ссылки.

MaratMaratMarat, а почему мой вариант не подойдет? Если спрайты разместить друг под другом в картинке, а в background-position двигать

А вообще да, показали бы ссылку хотя бы.

Цитата ("Anexroid"):

Если спрайты разместить друг под другом в картинке, а в background-position двигать

в спрайте элементы (фон) расположены друг под другом итак.
Вот в таком порядке:
.left (ширина 25)
.center (repeat-x, ширина 25)
.right (ширина 25)t
Отступы в пункте меню по краям составляют 10 пикселей. Т.е. 10пикселей - текст_пункта_меню - 10 пикселей.
Накладываться элементы друг на друга не должны (.keft, .right и ссылка), т.к. фон прозрачный.

p.s.: дико извиняюсь, друзья, что нет примера, который можно показать =)

Хм, кажется понял.
Сейчас попробую сделать. Зацепило))

Да тут миллион вариантов

Развесьте боковушки абсолютом, к примеру....отрицательными координатами

Цитата ("nehovaysyatopol"):

Развесьте боковушки абсолютом, к примеру....отрицательными координатами

Не подходит =) Я же говорю, что отступы в пункте меню по краям составляют 10 пикселей. Т.е. 10пикселей - текст_пункта_меню - 10 пикселей. А ширина бокового фона (слева и справа) составляет 25 пикселей.
Накладываться элементы друг на друга не должны (.keft, .right и ссылка), т.к. фон прозрачный.

Ну если фон однородный или не очень сложный, то можно скруглить углы на css3

Цитата ("MaratMaratMarat"):

увеличивается слишком сильно за счет падингов для ссылки

можно второй ins добавить, с margin 0 -15px
в итоге отступы по 10

<a href="#">

<i class="tm_left"></i>

<i class="tm_right"></i>

<ins class="bg"><ins class="pad">Пункт меню</ins></ins></a>


a {padding:0 25px;}

.pad {margin:0 -15px;}

H4mpy, Спасибо тебе! =) Помог!