Ante todo un saludo a todos, este es mi primer post (y supongo que no el útlimo) y en mi corto andar por los campos del CSS ya estoy medio desesperado.
Pillé un vertical menú (de los que tienen imágenes distintas para el a:link y el a:hover de internet y modificándolo me hace una flipada en el maravilloso IE, y es que si le defino el tipo de letra o el tamaño de la misma me mete un línea de 1px blanco entre los elementos de la lista.
Señalo en rojo el texto de la discordia, pero insisto con solo poner uno de los dos ya se flipa el IE:
ul {
list-style: none;
margin: 0;
padding: 0;
}
li{
border: none;
border-top-color: #888888;
border-top-style: solid;
border-top-width: 1px;
}
/*- Menu 8--------------------------- */
#menu8 {
width: 188px;
margin: 10px;
border: none;
border-bottom-color: #888888;
border-bottom-style: solid;
border-bottom-width: 1px;
}
#menu8 li a {
height: 20px;
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none;
}
#menu8 li a:link, #menu8 li a:visited {
color: #888888;
display: block;
background: url(imagenes/menu8h.gif);
padding: 4px 0 0 20px;
}
#menu8 li a:hover {
color: #000000;
background: url(imagenes/menu8h.gif) 0 -24px;
padding: 4px 0 0 20px;
}
</style>
<div id="menu8">
<ul>
<li><a href="#1" title="Link 1">Poets desire to die</a></li>
<li><a href="#2" title="Link 2">Sheets</a></li>
<li><a href="#3" title="Link 3">Fatal end</a></li>
<li><a href="#4" title="Link 4">Trip</a></li>
<li><a href="#5" title="Link 5">Allegory of Despair</a></li>
<li><a href="#5" title="Link 5">Ramona</a></li>
<li><a href="#5" title="Link 5">Spine Trick</a></li>
<li><a href="#5" title="Link 5">Fallen</a></li>
</ul>
</div>
Saludos!