Menu à onglet en CSS : pb sur pixel blanc entre onglet et corps

Bonjour,

J'ai un menu à onglet sur la navigation droite de mon site :
Le Repaire des Motards

quand on clique sur l'un des 3 onglets, on voit bien les différents textes s'afficher. cette partie là fonctionne bien.
Ce qui me pose problème, c'est le pixel blanc à gauche de la boite, situé entre le controu gris de l'onglet et le contour gris de la boite. impossible de le faire disparaitre.

http://www.lerepairedesmotards.com/img/tmp/tmp.gif

le code de la boite à onglets

<div class="thumbs">
  <ul>												
   	 <li class="tabactiv"><a href="javascript:;" onmousedown="Onglet('blocactu','tabdepeches',this);">Dépêches</a></li> 	
	 <li><a href="javascript:;" onmousedown="Onglet('blocactu','tabclefs',this);">Actus</a></li>
	 <li><a href="javascript:;" onmousedown="Onglet('blocactu','tabreportages',this);">Reportages</a></li>
  </ul>
</div>

<div id="blocactu"> 
[...]code du bloc[...]
</div>

le code CSS

#blocactu, #blocforum{
	width:211px;
	padding: 5px 5px 5px 10px;
	margin:0 0 10px 10px;
	background:#fff;
	border: 1px solid #999999;
	/* border-style:none solid solid solid; */
}

#blocactu ul, #blocforum ul {
	list-style-type:none;
}

#blocactu li a , #blocforum li a {
	color:#000000;
	padding-left: 10px;
	list-style-type:none;
	background:url(/img/puces/triangle2.gif) no-repeat left top ;
}

#blocactu li a:hover, #blocforum li a:hover{
text-decoration:underline;
}

.thumbs {
	width:226px;
	margin-left:10px;
}	

.thumbs ul {
	padding: 5px 0 5px 0;
}

.thumbs li {
	display:inline;
	position:relative;
	list-style: none;
}

.thumbs li a{
	color:#000000;
	font-size: 12px;
	font-weight:bold;
	text-align:center;
	text-decoration: none;
	padding:5px 7px 5px 7px;
	margin-right:5px;
	background:#ccc;
	}
	
.thumbs li a:hover{
	color:#333;
	background:#bbb;
}

.thumbs .tabactiv a {
	background:#fff;	
	border:1px solid #999;
	border-bottom:1px solid #FFFFFF; 
}

j'ai essayé de passer en float:left avec les autres modifs nécessiares en termes de margin mais j'ai toujours le même problème.
Modifié par ElMotard (30 Jul 2009 - 10:39)

Le truc que tu peux faire
c'est

#blocactu{
    margin-top: -1px;
}
.thumbs li a{
   padding-bottom: 4px;
}
.thumbs li.tabactiv a{
    border-bottom: 0;
    padding-bottom: 5px;
}

Le texte des onglets non actif sera 1px plus bas mais à l'oeil nu ça ne se voit à peine.
Sinon y a surement d'autres solutions en modifiant la structure de l'html.

Super ! çà marche nickel...

Merci
Modifié par ElMotard (30 Jul 2009 - 16:32)

De rien !