ayuda,problema con menu

[joseomaker]

Código HTML:

<div id="menu" class="cont">
<div id="contmenu">
<div class="boton"><p>boton1</p></div>
<div class="boton"><p>boton2</p></div>
</div>
</div>
 

Código CSS:

.cont {
position: relative;
margin: 0 auto;
width: 100%;
}
.boton {
background-image: url(../img/boton.png);
display: table-cell;
vertical-align: middle;
position: relative;
height: 42px;
padding-right: 5px;
}
.boton p {
color: white;
font-weight: bold;
}
.boton p a {
text-decoration: none;
}
.boton:hover {
background-image: url(../img/boton_hover.png);
}
#menu {
border: 1px solid black;
background-image: url(../img/boton.png);
text-align: center;
height: 42px;
}
#contmenu {
display: table;
background-image: url(../img/boton.png);
position: relative;
margin: 0 auto;
height: 42px;
width: 782px;
}
 

el problema es el siguiente: cuando voy a probarlo resulta que se forma esto:

http://img195.imageshack.us/i/screenmenu.jpg/

ven?,la linea gris de la muerte que aparece abajo del menu,como solucionar esto?,ayudenme...

Saludos