I'm using an horizontal menu, with this html code:
<table class="tabellacontent">
<tr>
<a class="mesitab" href="link"><td><div class="tabmese">Gen</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Feb</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Mar</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Apr</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Mag</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Giu</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Lug</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Ago</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Set</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Ott</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Nov</div></td></a>
<a class="mesitab" href="link"><td><div class="tabmese">Dic</div></td></a>
</tr>
</table>
With the following CSS:
.tabellacontent{
margin:auto;
position:relative;
width:95%;
text-align:center;
}
.mesitab{
text-decoration:none;
}
.tabmese{
color:rgb(0,56,130);
margin:auto;
position:relative;
border:2px solid #000;
border-color:rgb(82,115,154);
width:100%;
height:15px;
top:1px;
text-align:center;
vertical-align:middle;
background-color:silver;
font-size:12px;
}
.tabmese:hover{
color:white;
background-color:rgb(49,87,132);
cursor: hand;
}
My problem is that this code works on IE (7/8), but it does not work on Google Chrome.
How can I solve this problem?
Here there is a link to jsFiddle
First of all tr
should have its just child as td
you have a wrong html.
Solution
Place the a
tag in the td
and div
tag then make padding
and margin
of div
to 0
then make a tag display:block
to cover the entire td.