menu vertical

Hola, Tengo un menu vertical de 4 botones hecho con listas, donde los botones son imágenes 217x54. He comprobado que cuando los botones tienen link, el borde que configuré en la lista se ajusta a la img.

Ok, ahora viene lo curioso. Sustituyo un botón por otra imágen (también 217x54) y no la linko (porque sirve para indicar en qué parte de la web estás). Entonces el borde se amplía 1 o 2px hacia abajo, separándose de la imágen. Es como si añadiera padding (ojo! observa: padding:0.

os paso el código:

Código :

#menu{
margin:0px;
padding:0px;
list-style:none;
}


#menu li{
width: 217px;
height: 54px; 
margin-bottom:20px;
padding:0px;
border:1px solid white;      <-el borde problemático->
}


#menu li a.enlace{ 
width: 217px;
height: 54px;
display: block;
position: relative;
background-image: url(botones/mando1.jpg);
background-repeat: no-repeat; 
}


/*Ahora hacemos una lista de dos ítems*/

<ul id="menu">

<li ><img src="botones/mando1.jpg"></li>    <-ésta es la img que tiene separación de borde->
<li><a href "#" class="enlace"></a></li>        <-ésta se ajusta perfectamente->

</ul>

observa ahora lo que pasa con la <li> que no tiene a href

Crea un estilo saparado para ese caso, yo quitaría el borde para esa imagen, personalmente no le veo mucho sentido, de hecho yo quitaría todos los bordes.