Пункты меню картинками, глюк в IE6

[od_lazio]

Есть меню, шрифт не стандартный поэтому режу картинками. По :hover пункт меняет цвет.

Делал так:

<ul class="menu-list">
	<li class="menu-1"><a href="#"></a></li>
	<li class="menu-2"><a href="#"></a></li>
	<li class="menu-3"><a href="#"></a></li>
	<li class="menu-4"><a href="#"></a></li>
</ul>

А для .menu-list .menu-1 a задаю размеры и картинку фоном.

Картинки такого вида(голубым красится при наведении):

а баг собственно вот в чём.

Так меню отображается везде:

А так в IE6:

hasLayout есть, так как размеры заданы. position:relative не помогает.

Есть идеи как это лечится?

[Justnewone]

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

[mini]

на "а" кидаешь "класс" ему кидаешь БГ картинку, а при hover другой БГ, или режиш что бы в одной было и черное и сине, тогда на hover позиционируеш БГ!

[Lincky]

ну и какие размеры ты задаешь для первой лишки?

[Justnewone]

Можно вообще красиво сделать... всем известно, что картинка, для которой нужен alt - это не бекграунд.

Делаем так (отдельно взятая LI):

<li class="menu"><a href="#" class="about"><img src="fix.gif" height="YYY" width="XXX" alt="О компании" /></a></li>

CSS:

LI A{background:url("image.gif")}
LI A.about{background-position:XXX YYY}
LI A.about:hover{background-position:XXX YYY}

теперь надо все надписи разместить ф фотошопе на одном лайете image.gif, причем как черные таки голубые и сбацать отдельно 1х1px прозрачный fix.gif, расставить все нужные XXX и YYY, добавить расположение бекграунда на каждый отдельный класс в списке. Имееем на выходе картинки с альтами, вместо кривых пустых A, безо всякого JS обычным ховером все разрешается, носите на здоровье.

PS, если надо, можно сделать так же для печати: внутри ссылки SPAN с "о компании", который сразу дисплей:ноне, а в медиа принт - дисплей:инлайн

Edited July 15, 2009 by Justnewone

[od_lazio]

Justnewone

да, пожалуй так и сделаю.

Всем спасибо за помощь