Menu a tab con una immagine, 3 tag non visualizzato correttamente in Chrome e Opera
Allroa ragazzi, ho quest'immagine:
http://img20.imageshack.us/img20/1686/83537256.gif
Ho poi utilizzo questo codice CSS e questo codice HTML per generare un menù a tab:
Codice:
#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:
Codice 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:
http://img193.imageshack.us/img193/8879/31876229.gif
Su chrome (l'errore sempbra con il tag <b>, non viene mostrato lo sfondo):
http://img41.imageshack.us/img41/8215/14050650.gif
Su Opera (sempre il tag <b> sembra errato, viene mostrato in alto):
http://img40.imageshack.us/img40/1195/93029687.gif
Potreste dirmi dove sbaglio?
Grazie in anticipo :wink:
