Simple (hopefully) CSS Image Positioning Question

I'm using the Digg 3-column wordpress theme at www.ChickTech.net. I decreased the height of the tabs, but it left a gap between them and the header (top left). I was able to fiddle w/ the css and get the left side image to drop, but not the right side. Here's the css for menu area:

#menu ul{
	margin: 0;
	padding: 0 0 0 10px;
	list-style: none;
}

#menu ul li{
	float: left;
        margin: 0 5px 0 0;
	font-size: 14px;
	font-weight: bold;
	background: url(images/bg_tab_right.gif) no-repeat right top;
	color: #ffffff;
}

#menu ul li a{
margin-top:13px;
	display: block;
	padding: 7px 10px 2px;
	text-decoration: none;
	background: url(images/bg_tab_left.gif) no-repeat left top;
	color: #ffffff;
}

#menu ul li a:hover{
	text-decoration: underline;
}

Code (markup):

Any thoughts on how I can get this lined up correctly w/o having to use the original huge tabs?

Thanks.

Jenn

 

No ideas? I'd already tried altering the padding and margins in several ways, and still couldn't get that one image aligned right. Do I have to somehow detach that image from the css for the text on top of it (unless I'm braindead today, they're in the same area)?

 

Um well I can't really test it, but this should work:

#menu ul{
	margin: 0;
	padding: 0 0 0 10px;
	list-style: none;
}

#menu ul li{
	float: left;
        margin: 13px 5px 0 0;
	font-size: 14px;
	font-weight: bold;
	background: url(images/bg_tab_right.gif) no-repeat right top;
	color: #ffffff;
}

#menu ul li a{
	margin-top:0px;
	display: block;
	padding: 7px 10px 2px;
	text-decoration: none;
	background: url(images/bg_tab_left.gif) no-repeat left top;
	color: #ffffff;
}

#menu ul li a:hover{
	text-decoration: underline;
}

Code (markup):

 

Rep for you. You're officially my favorite person of the day. Thanks a lot for being willing to help the "CSS-stupid".