Menu a tab con una immagine, 3 tag non visualizzato correttamente in Chrome e Opera

Allroa ragazzi, ho quest'immagine:


Ho poi utilizzo questo codice CSS e questo codice HTML per generare un menù a tab:

#tabs {
	margin: 0;
	padding: 0;
}

#tabs ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#tabs li {
	float: left;
	margin-top: 2px;
	padding: 0;
}

#tabs li.active {
	background: url('./images/black/bg_tabs.gif') repeat-x 0 -245px;
	margin: 0;
	padding: 0;
}


#tabs li.right {
	float: right;
}

#tabs li.red {
	color: #bf0000;
}

#tabs a {
	background: url('./images/black/bg_tabs.gif') repeat-x 0 -245px;
	margin: 0 1px 0 1px;
	padding: 0;
	text-decoration: none;
	font-size: 1.1em;
	outline: 0;
}


#tabs a span {
	background: url('./images/black/bg_tabs.gif') no-repeat left -35px;
	padding: 6px 6px 6px 8px;
	margin: 0;
	color: #999;
}

#tabs a b {
	background: url('./images/black/bg_tabs.gif') no-repeat right -140px;
	padding-right: 3px;
	margin: 0;
}

#tabs a:hover {
	background-position: 0 -280px;
}

#tabs a:hover span {
	color: #FFF;
	background-position: left -70px;
}

#tabs a:hover b{
	background-position: right -175px;
}

#tabs .active a, #tabs .active a:hover {
	background-position: 0 -210px;
}

#tabs .active a span {
	background-position: top left;
	padding: 7px 6px 7px 8px;
	color: #000;
}

#tabs .active a b, #tabs .active a:hover b {
	background-position: right -105px;
}

#tabs .active a:hover span {
	color: white;
	background-position: top left;
}

HTML:

<div id="tabs">
	<ul>
		<li class="active"><a href="index.php"><b><span>Home</span></b></a></li>
		<li><a href="forum.php"><b><span>Forum</span></b></a></li>
	</ul>
</div>

Su firefox si vede correttamente:


Su chrome (l'errore sempbra con il tag <b>, non viene mostrato lo sfondo):


Su Opera (sempre il tag <b> sembra errato, viene mostrato in alto):


Potreste dirmi dove sbaglio?

Grazie in anticipo

Uppo ragazzi perchè non sono riuscito ancora a risolvere