I've search a lot, and know there are articles out there to fix this issue, but I can't find a fix.

http://tinyurl.com/ayfajzu

Scroll down to the menu. There are gaps between the top and middle div, and middle and bottom divs. I've tried margins, padding, borders, spacer divs...nothing seems to be working

Here is my CSS:

Code:
#menuborder {
position: relative; 
width: 100%; /* for IE 6 */
margin-left: auto;
margin-right: auto;
}

.menutop { 
position: relative;
height: 40px;
width: 690px;
background-image: url(http://216.172.172.109/~ctoddm/wp-content/themes/striking/images/bg-content-top.png);
}

.menumiddle {
position: relative;
background-image: url(http://216.172.172.109/~ctoddm/wp-content/themes/striking/images/bg-content-middle.png);
width:690px;
background-repeat:repeat-y;
}

.menubottom {
position: relative;
height: 40px;
width: 690px;
background-image: url(http://216.172.172.109/~ctoddm/wp-content/themes/striking/images/bg-content-btm.png);
padding: 0 1px 0 1px;
}