Наклонные вкладки

В последнем проекте мне пришлось сделать динамические вкладки. Схема простая — выделенная, наведенная и обычная. Единственное «НО» заключается в их заползании друг под друга. Решение пришло быстро, хотя не идеальное.

HTML:

<ul>
    <li><a href="#"><span>Форум</span></a></li>
    <li><a href="#"><span>Регистрация</span></a></li>
    <li><a href="#"><span>Аккредитованным пользователям</span></a></li>
    <li><a class="main_link" href="#"><span>Главная</span></a></li>
</ul>

CSS:

ul {
	border-bottom: solid 2px #000;
	list-style: none;
	overflow: hidden;
	padding: 0;}
	ul li {
		display: inline;
		float: right;}
a {
	background: url(slanting-tabs/h-menu-bg.gif) right -63px no-repeat;
	color: #000;
	display: block;
	float: left;
	font: 11px Tahoma, Geneva, sans-serif;
	margin: 0 0 0 -25px;
	padding: 0 45px 0 0;
	position: relative;
	text-decoration: none;
	cursor: pointer;}
	a span {
		background: url(slanting-tabs/h-menu-bg.gif) left -63px no-repeat;
		float: left;
		height: 25px;
		padding: 38px 0 0 35px;
		display: block;}
a:hover {background: url(slanting-tabs/h-menu-bg.gif) right -126px no-repeat;}
	a:hover span {background: url(slanting-tabs/h-menu-bg.gif) left -126px no-repeat;}
a.main_link {
	background: url(slanting-tabs/h-menu-bg.gif) right 0 no-repeat;
	color: #fff;}
	a.main_link span {
		background: url(slanting-tabs/h-menu-bg.gif) left 0 no-repeat;
		padding: 33px 0 5px 35px;}
a.main_link:hover {background: url(slanting-tabs/h-menu-bg.gif) right 0 no-repeat;}
	a.main_link:hover span {background: url(slanting-tabs/h-menu-bg.gif) left 0 no-repeat;}

IE капризничает. Ничего нового.

<!--[if lt IE 8]>
<script type="text/javascript" src="http://www.easylife.by/example/IE8.js"></script>
<![endif]-->

Все готово. Пример.