HTML+CSS+JavaScript

Баг в меню при отображении в IE7 и IE6

<ul>
<li><div class='text2'><span class="ra">&gt;</span><a href='#' class='links2'>Полуфабрикаты</a></div><ul>

<li><div class='text2'><a href='#' class='links2'>Другое</a></div></li>
<li><div class='text2'><a href='#' class='links2'>Консервы</a></div></li>
<li><div class='text2'><a href=#' class='links2'>Сухой корм</a></div></li>
</ul></li>

<li><div class='text2'><span class="ra">&gt;</span><a href='#' class='links2'>Полуфабрикаты_2</a></div><ul>

<li><div class='text2'><a href='#' class='links2'>Другое_2</a></div></li>
<li><div class='text2'><a href='#' class='links2'>Консервы_2</a></div></li>
<li><div class='text2'><a href='#' class='links2'>Сухой корм_2</a></div></li>
</ul></li>

</ul>

В IE7 меню первого уровня отображается так:
Полуфабрикаты >
->лишний пробел из-за <span class="ra">
Полуфабрикаты_2 >

В IE8 , firefox ver. 3, opera ver. 9, google chrome ver.2 отображается корректно(без пробела):

Полуфабрикаты >
Полуфабрикаты_2 >

В IE6 меню не раскладывается...

Как можно исправит данные баги?

ие криво учитывает переносы строк в коде.
поубирайте переносы.

Не помогло! :-(

C IE6 Разобрался. Проблема осталась с IE7

Меню отображает нормально если убрать <span class="ra">&gt;</span> &gt; - это стрека

Полуфабрикаты
Полуфабрикаты_2


-с <span class="ra">&gt;</span>


> //здесь получается перевод строки
Полуфабрикаты
> //здесь получается перевод строки
Полуфабрикаты_2

Есть ли альтернатива span или какой-нибудь другой вариант

Чтобы было как во всех браузерах


Полуфабрикаты >
Полуфабрикаты_2 >