<a> вынести BG-картинку за пределы элемента

[d0ublezer0]

Привет всем.

Имею UL лист со ссылками такого вида:

ul.mm, ul.mm li {
	list-style:none;
}
ul.mm a {
	display:block;
	background:#4dc4ed url(/images/bg_mm.gif) right top no-repeat;
	height:25px;
	color:#FFF;
	margin-bottom:2px;
	width:200px;
	font-size:0.8em;
	text-decoration:none;
	line-height:25px;
	padding-left:1.5em;
}
ul.mm a:hover {
	background:#ec584c right bottom url(/images/bg_mm.gif) no-repeat;
}

Посмотреть можно тут: http://www.zebra-tara.ru (там пустая страница, только лист со ссылками)

Что я хочу: чтобы фоновая заливка цветом у ссылки заканчивалась до background-изображения. Либо, как-то вынести изображение правее элемента, но чтобы они составляли единое целое, как ссылка.

Для чего? Стрелочки должны получиться.

Как вариант, можно конечно сделать всю заливку изображением, расширить его до размеров ссылки. Но это - увеличение веса картинки.

Помогите?

[Justnewone]

Привет всем.

Имею UL лист со ссылками такого вида:

ul.mm, ul.mm li {
	list-style:none;
}
ul.mm a {
	display:block;
	background:#4dc4ed url(/images/bg_mm.gif) right top no-repeat;
	height:25px;
	color:#FFF;
	margin-bottom:2px;
	width:200px;
	font-size:0.8em;
	text-decoration:none;
	line-height:25px;
	padding-left:1.5em;
}
ul.mm a:hover {
	background:#ec584c right bottom url(/images/bg_mm.gif) no-repeat;
}

Посмотреть можно тут: http://www.zebra-tara.ru (там пустая страница, только лист со ссылками)

Что я хочу: чтобы фоновая заливка цветом у ссылки заканчивалась до background-изображения. Либо, как-то вынести изображение правее элемента, но чтобы они составляли единое целое, как ссылка.

Для чего? Стрелочки должны получиться.

Как вариант, можно конечно сделать всю заливку изображением, расширить его до размеров ссылки. Но это - увеличение веса картинки.

Помогите?

Внтурь ссылки спан, на него дисплей блок и маргин-райт:ширина картинки и цвет. В самой ссылке в бекграунде только картинка

[Great Rash]

А разве нельзя просто назначить ссылке левый паддинг?

[Justnewone]

А разве нельзя просто назначить ссылке левый паддинг?

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

[d0ublezer0]

Justnewone Спасибо, дорогой!

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

Edited April 6, 2009 by d0ublezer0

[d0ublezer0]

Еще вопросец: в этом списке хочу сделать ширину ссылок по размеру текста + небольшой padding-right

Если ссылке установлен display:block, то она растягивается на всю доступную ширину, и можно только указать размер явно.

Как ее обрезать по размеру содержимого?

[Justnewone]

Еще вопросец: в этом списке хочу сделать ширину ссылок по размеру текста + небольшой padding-right

Если ссылке установлен display:block, то она растягивается на всю доступную ширину, и можно только указать размер явно.

Как ее обрезать по размеру содержимого?

Дисплей inline-block, правда с кроссбраузерностью если надо, придеца повозица, но в гугле полно.

Но надо ли тут? будет нестройный вертикальный список, либо справа стрелки лесенкой, либо слева фон.

[d0ublezer0]

Вот, мне и надо стрелки лесенкой.

А как для IE прыгать/мудрить, в какую сторону?

[d0ublezer0]

хм, inline-block нормально прожевался IE

[Justnewone]

хм, inline-block нормально прожевался IE

6-й не просечет, ему назначайте inline вместе с zoom:1 - будет вести себя как inline-block