"Pushed Down" Button on Tab, It won't display correctly Options

[montmorency3]

A website I am creating requires the "pushed down" button look on the top tab buttons. For my CSS, I use this code:
________________________________________________________________________________
______

/* Menu */

#menu {
float: left;
width: 600px;
height: 50px;
margin: 0 auto;
}

#menu ul {
margin: 0;
padding: 17px 0 0 20px;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
float: left;
display: inline;
}

#menu a {
display: block;
float: left;
margin-right: 5px;
padding: 0px 20px;
text-decoration: none;
font: 14px Georgia, "Times New Roman", Times, serif;
color: #000000;
height: 40px;
}

#menu a:hover {
background: url(images/img4.gif);
color: #FFFFFF;
}

#menu .active a {
background: url(images/img4.gif);
color: #FFFFFF;
}
_______________________________________________________________________________

However, whenever I view my website, the "pushed down" button picture always is further down than it is suppose to be;
The top text on the tab is flush with the top of the picture, hence the misplacement.
Any suggestions, or causes of problem would be helpful.

[pandy]

Please link to a sample page.