Hola, se me ha ocurrido intentar sustituir unos iconos de navegación por un menú horizontal CSS, pero no hay manera de que se muestre correctamente ni en IE ni en Firefox. Con el primero la lista aparece incluida en un especie de "seudodiv" embrionario del mismo color y anchura que el contenedor general; con Firefox la última de las cinco pestañas se fusiona con la primera... ¡desde abajo!
Para clarificar mejor la cosa, los códigos son, por un lado, el que citaba en
www.daboweb.com/foros/index.php/topic,31091.0.html; y por otro, éste creado por Eric Meier y tomado de la lista ofrecida en
www.xyberneticos.com/index.php/2007/05/03/lista-de-menu-en-css-para-tus-disenos/ :
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}
#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}
¿Alguien sabe cómo "domesticar" el menú de marras?
