Altura de Menu

[leo_nqn]

Hola que tal. tengo el siguiente Menu en html, Este menu tiene una imagen de fondo de 30 px.. el problema es que sobre la imagen y debajo de esta me deja un espacio. Osea, el codigo del menu no me respeta la altura del div en el que se encuentra este menu. Les dejo El codigo html y css para que vean. seria ideal que la altura del menu sea la misma que la del div.. espero su respuesta saludos y muchas gracias!

HTML:

Código:

<div id="MenuPrinicipal">
<ul> 
        <li>Botón uno</li>  
        <li>Botón dos</li>  
        <li>Botón tres</li>  
</ul>

CSS:

Código:

#MenuPrinicipal{
	margin:auto;
	position:relative;
	width:960px;
	font:"Centaur";
	font-size:18px;
	/*background-image:url(Imagenes/menu-01.png);  */
}

#MenuPrinicipal ul li {  
        display: inline;  
        padding: 2px 7px;/* Separar el texto*/  
        margin:5px;  /*Separar los botones */
		/*background-color:#E4E4E4;  Color de fondo */  
}  
#MenuPrinicipal ul li:hover {  
        background-color:#FF0000;  /*Color de fondo sobre el boton */  
        cursor: pointer; /* cambiar el aspecto del puntero */  
}  
#MenuPrinicipal ul {  
        /* Linea para delimitar la botonera   
        border-bottom-width: 1px;  
        border-bottom-style: solid;  
        border-bottom-color: #E4E4E4;  */
		background-image:url(Imagenes/menu-01.png);
		height:30px;
}

[leo_nqn]

Solucionado : Gracias por las respuestas..

Hice lo siguiente con el codigo HTML:

Código:

<div id="MenuPrinicipal">
 
        <a href="principal.html"><li>Inicio</li></a>  
        <a href="contacto.php"><li>Contacto</li></a>  
        <a href="tratamientos.html"><li>Productos</li></a>
</div>

[sanxuan]

La solución que aportas no lo es en absoluto. Una etiqueta <li> sólo puede ir dentro de <ul> o <ol>.
No tiene sentido tener elementos de lista fuera de una lista. Si ya no necesitas la lista, elimina los <li>.

Código HTML:

<div id="MenuPrinicipal">
         <a href="principal.html">Inicio</a>  
        <a href="contacto.php">Contacto</a>  
        <a href="tratamientos.html">Productos</a>
</div>
 

cambiando "#MenuPrincipal ul li" por "#MenuPrincipal a".

Otra alternativa sería mantener la lista. En ese caso te recomiendo usar enlaces dentro de la lista.

Código HTML:

<div id="MenuPrinicipal">
  <ul>
        <li><a href="principal.html">Inicio</a></li>  
        <li><a href="contacto.php">Contacto</a></li>  
        <li><a href="tratamientos.html">Productos</a></li>
  <ul>
</div>
 

El problema que tenías con la altura lo podías corregir modificando el padding y el margin.
En caso necesario puedes usar la propiedad height de la siguiente forma:

Código CSS:

#MenuPrinicipal ul li {  
        display: inline-block; /*En lugar de inline */
        padding: 2px 7px;/* Separar el texto*/  
        margin:0 5px;  /*Separar los botones */ /* Eliminamos el margen superior e inferior*/
        height: 24px; /* 30px de alto - 2px de padding arriba y abajo - 1px de borde de ul arriba y abajo*/
}
#MenuPrincipal ul{ margin:0; padding:0 }