Menu "Sliding Doors" Problèmes de compatibilité IE6

Bonjour, je travaille présentement à la mise en page de mon site personnel(encore en développement, soyez indulgent svp).

J'ai de la difficulté avec ma navigation horizontal.
J'aimerais avoir quelques pistes de solutions afin d'avoir le même rendu visuel sur tous les navigateurs, même sur Internet Explorer qui est obselète.

Pour l'instant j'ai mis en place un correctif avec une nouvelle feuille de styles exclusive au navigateur Internet Explorer qui affiche tout de même la navigation, sans l'effet d'onglet que je désire. http://dev.simonbedard.ca/

L'enjeu est plutôt cette page: http://dev.simonbedard.ca/menu.html ; J'ai essayé deux techniques semblables avec une sémantique différente.

<p>
<ul id="navigation-tab">  
	<li class="current"><a href="#"><span>Accueil</span></a></li>
	<li><a href="#"><span>Portfolio</span></a></li>
	<li><a href="#"><span>Blog</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
</ul>
</p>
<ul id="navigation-tab-2">  
	<li class="current"><a href="#">+Accueil+</a></li>
	<li><a href="#">+Portfolio+</a></li>
	<li><a href="#">+Blog+</a></li>
	<li><a href="#">+Contact+</a></li>
</ul>

/*Navigation Onglets*/
#navigation-tab{float:left;margin-top:10px;width:940px;}
#navigation-tab ul{height:38px;margin:0;padding:0;}

#navigation-tab  li, #navigation-tab  li.current{float:left;background: url('../images/tab-nav/left.png')no-repeat left top;margin-left:-15px;padding-left:31px;}
#navigation-tab li a, #navigation-tab li.current a{display:block;font-size:10px;color:#00aeef;background:url('../images/tab-nav/right.png')no-repeat right top;padding-right:31px;}
#navigation-tab li a:hover{color:#000;}
#navigation-tab span, #navigation-tab li.current span{height:38px;display:block;background:#fff;line-height:50px;background:url('../images/tab-nav/tab-bg.png');line-height:38px;padding-left:5px;padding-right:5px;}

#navigation-tab  li.current{background: url('../images/tab-nav/active-l.png')no-repeat left top;}
#navigation-tab li.current a{color:#000;background:url('../images/tab-nav/active-r.png')no-repeat right top;}
#navigation-tab li.current a:hover{color:#fff;}
#navigation-tab li.current span{background:url('../images/tab-nav/tab-active-bg.png');}

/*Navigation Onglets Deuxième Version*/
#navigation-tab-2{float:left;margin-top:10px;width:940px;}
#navigation-tab-2 ul{height:38px;margin:0;padding:0;}
#navigation-tab-2  li, #navigation-tab-2   li.current{float:left;background: url('../images/tab-nav/tab-nav2/right.png')no-repeat right top;margin:0;}
#navigation-tab-2 li a, #navigation-tab-2  li.current a{float:left;display:block;font-size:10px;color:#00aeef;background:url('../images/tab-nav/tab-nav2/left.png')no-repeat left top;margin-left:-21px;padding:10px 31px 15px;}
#navigation-tab-2 li a:hover{color:#000;}
#navigation-tab-2  li.current{background: url('../images/tab-nav/tab-nav2/active-r.png')no-repeat right top;}
#navigation-tab-2 li.current a{color:#000;background:url('../images/tab-nav/tab-nav2/active-l.png')no-repeat left top;}
#navigation-tab-2 li.current a:hover{color:#fff;}

Est-ce quelqu'un peut me donner un coup de main? Merci de l'attention particulière que vous portez à mon problème.
Modifié par Binary (20 Nov 2009 - 04:00)