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.