Ik zit met het volgende probleem. In Google Chrome komt het menu goed uit,
maar in zowel Safari als Firefox is het menu groter. Ligt dit aan de codering?
Zo nee, wat zou dan wel een oplossing kunnen zijn?
Website: www.worldtourgear.nl
HTML
<div id="menu">
<ul>
<li><a href="ag2r.html">AG2R La Mondiale</a></li>
<li><a href="astana.html">Astana Pro Team</a></li>
<li><a href="blanco.html">Blanco Pro Cycling</a></li>
<li><a href="bmc.html">BMC Racing Team</a></li>
<li><a href="cannondale.html">Cannondale</a></li>
<li><a href="euskaltel.html">Euskaltel Euskadi</a></li>
<li><a href="fdj.html">FDJ</a></li>
<li><a href="garmin.html">Garmin Sharp</a></li>
<li><a href="katusha.html">Katusha Team</a></li>
<li><a href="lampre.html">Lampre - Merida</a></li>
<li><a href="lottobelisol.html">Lotto Belisol</a></li>
<li><a href="movistar.html">Movistar Team</a></li>
<li><a href="omegapharma.html">Omega Pharma</a></li>
<li><a href="greenedge.html">ORICA GreenEDGE</a></li>
<li><a href="radioshack.html">Radioshack Nissan</a></li>
<li><a href="sky.html">Sky Procycling</a></li>
<li><a href="argos.html">Team Argos-Shimano</a></li>
<li><a href="saxobank.html">Saxo - Tinkoff</a></li>
<li class="two_columns"><a href="vacansoleil.html" title="vcd">Vacansoleil-DCM Pro Cycling Team</a></li>
</ul>
</div>
CSS
#menu ul {
list-style-type: none;
}
#menu ul li {
display: block;
}
#menu ul li a {
font-size: 11px;
font-family: Arial;
font-weight: bold;
color: black;
}
#menu ul li a:hover
{
background-color: #ccc;
}
#menu ul li
{
float: left;
text-align: center;
}
#menu ul li.two_columns a
{
width: 320px; /* 2*width*/
}
#menu ul li a
{
text-decoration: none;
display: block;
color: #000;
font-size: 90%;
height: 35px;
width: 160px;
background-color: #eee;
padding: 6px 0px;
text-align: center;
box-sizing: border-box;
border: 1px solid #fff;
}