Война с ие6, обсуждение стратегии!

[7Rei]

Итак, верстаю меню, во всех браузерах все хорошо, как всегда отличился ие6.

html код, если активна главная страница:

Код

<div class="menu_block">
<ul class="menu">
<li class="leaf first active-trail"><a href="/#" title="" class="active">Меню1</a></li>
<li class="leaf"><a href="/#" title="">Меню2</a></li>
<li class="leaf"><a href="/#" title="">Меню3</a></li>
</ul>
</div>
 

если другая:

Код

<div class="menu_block">
<ul class="menu">
<li class="leaf first"><a href="/#" title="" class="active">Меню1</a></li>
<li class="leaf active-trail"><a href="/#" title="">Меню2</a></li>
<li class="leaf"><a href="/#" title="">Меню3</a></li>
</ul>
</div>
 

Код

.menu_block ul li.active-trail {
	background:url(images/menu_active_bg.gif) no-repeat right;
	padding: 0 33px 0 0;
	position:relative;
	left: -27px;
	margin-right: -27px;
}
 
.menu_block ul li.first.active-trail {
	background:url(images/menu_active_bg.gif) no-repeat right;
	position:static;
	left: 0;
	margin: 0;
}
 

Проблема в том, что для ие оба стиля одинаковые!!! Не взирая на дополнительный класс .first !
Кто сталкивался? Как выкрутится из такой ситуации?

[Adeptus]

Тупо пропишите класс first без UL-LI-MENU и т.д.

[7Rei]

Тупо пропишите класс first без UL-LI-MENU и т.д.

Прописал:

Код

.menu_block ul li.active-trail {}
и
.first.active-trail {}
 

Увы, не сработало.  В этом случае вторая запись (.first.active-trail ) перестала применятся вообще.
Если оставлять только классы (без ul li...) то в ие они так же, просто не отображаются.

[7Rei]

Запись class="class1 class2" абсолютно корректна и валидна (http://www.w3.org/TR/CSS21/selector.html#class-html) и означает элемент, которому назначены классы class1 и class2 одновременно . То, что IE6 при такой записи реагирует лишь на последний класс - давно известный его баг (http://www.quirksmode.org/bugreports/archives/2004/12/IE_CSS_rendering_bug_with_multiple_classnames.html). Получается что в моем случае, активные пункты:

Код

<li class="leaf active-trail"><a href="/#" title="" class="active">Меню2</a></li>
<li class="leaf first active-trail"><a href="/#" title="" class="active">Меню1</a></li>
 

для ие6 ничем отличатся не будут!!!
Выхода нет, кроме как править код, и прописывать дополнительный id