Positionnement de texte sur des onglets...sur un fond.

Bonjour,

Je cherche à positionner des textes sur des onglets qui sont eux-mêmes superposés sur un fond, comme le montre l'exemple ci-dessous :

http://root.jeromine.com/tmp/onglets.html

Dans la CSS :

 #header {
      float: left ;
      width:850px;
      background:  url(i/t/header2.jpg) no-repeat top;
      height: 80px;
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 12px;
	  font-weight: bold;
	  margin:0;
	  padding:0;
	  border: 0px solid #000;
	  }
	  
	   #header ul {
	       padding:0;
      list-style:none;
	  padding-left : 15px;

	  }
    #header li {
      float: left;
      padding-left : 15px ;
     	  
      }
	 

Et dans le HTML :

<div id="header">
<ul>
  <li><a href="#">onglet bleu</a></li>
  <li id="current"><a href="#">onglet vert</a></li>
  <li><a href="#">onglet purple</a></li>
  <li><a href="#">onglet orange</a></li>
  <li><a href="#">onglet rouge</a></li>
</ul>

</div>
<div id="subHeader">
</div>	

=>est-ce que l'utilisation d'une liste en superposition d'un fond est judicieuse ? Je risque d'avoir des problèmes de positionnement d'un navigateur à l'autre, me semble-t-il ?
=>sinon, y a-t-il une autre piste ?

Merci