Hola todos,
Tengo un inconveniente con las listas. Estoy haciendo un menú horizontal y quiero ponerle un marco alreadedor. Puse una lista y afuera puse un div con borde para que me mostrara el marco. Pero al parecer las listas generan un padding bastante amplio, en Firefox no se ve tan mal, pero en IE se ve demasiada ancha la separación. Esto es lo que tengo:
Código HTML:
<div class="divmainmenu">
<ul id="navlist">
<li><a href="#">PRODUCT INFO</a></li>
<li><a href="#">CORPORATE</a></li>
<li><a href="#">DEVELOPERS</a></li>
<li><a href="#">DESIGNERS</a></li>
<li><a href="#">SUPPORT</a></li>
</ul>
</div>
Código:
/* main menu */
.divmainmenu {
padding-left: 5px;
border: 1px solid #999;
font-size:10px;
color:#999999;
text-align:center;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 15px; }
#navlist a:link, #navlist a:visited
{
color: #999;
background-color: #fff;
text-decoration: none;
}
#navlist a:hover
{
color: #2D3258;
background-color: #46D7FB;
text-decoration: none;
}
/* end main menu */
Y lo que me genera es:
En IE
Y en Firefox:
Mi pregunta es: Las listas de por sí crean ese padding o separación tan ancha? o me falta agregar algo o me sobra algo?
Les agradezco sus comentarios, porque ya no sé que mas arreglarle..
Saludos,
Liz