Unwanted border & menu items are larger than background.

The URL is www.nowcpr.com. I added a background image to my menu bar and the menu items (same image), for both page and category menus. On both menus, the background is smaller than the "buttons", and on the page menu, there is a white border that I can't get rid of.
The CSS I added for both menus is
div#menu1 ul.rMenu {
background-image:url(/wp-content/themes/atahualpa/images/nav_bg.jpg);
border: none 0px;
}
div#menu1 ul.rMenu li a:link {background-color:transparent !important; font-weight: bold;}
div#menu1 ul.rMenu li a:hover {background-color:transparent !important; font-weight: bold;}
div#menu1 ul.rMenu li a:visited {background-color:transparent !important; font-weight: bold;}
div#menu1 ul.rMenu li a:active {background-color:transparent !important; font-weight: bold;}

and then the same only using menu2 for the category menu.

I can't seem to get rid of the white that seems to border the page menu background and I can't get them the same size. I can't seem to figure out setting the height of the menu backgrounds, so they're even, or if that will even work.
What can I do?