Extremely Odd CSS Issue (has my theme developer stumped).

Thank you so much for your help. I'm actually a total newb at this. I totally customized parts of the TNT Theme. I updated the CSS to match and it's much closer now, but the CSS hover isn't working. It's not showing just the top third of the image like it's supposed to. It's showing the entire image.

Here's the CSS:

/***********************/
/* Primary Links Images*/
/***********************/
#primary-menu ul.links li.first,
#primary-menu ul.links li.first a:hover,
#primary-menu ul.links li.first a:focus,
#primary-menu ul.links li.first a:active {
color:#97292B
}


#header-bottom {
left:35px;
position:absolute;
top:92px;
}

ul.primary-links {
font-family:sans-serif,"Lucida Grande",Verdana,Arial;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}

ul.primary-links li {
float:left;
margin:0 1px;
}

ul.primary-links li a {
display:inline-block;
height:40px;
width:300px;
}

li#Community a,
li#Marketplace a,
li#Info_Center a {
width: 291px;
height: 40px;
color: transparent;
display: inline-block;
}

li#Community a {
background:transparent url(images/icons/community.png) no-repeat scroll left top;
}
li#Marketplace a{
background:transparent url(images/icons/community.png) no-repeat scroll left top;
}
li#Info_Center a{
background:transparent url(images/icons/community.png) no-repeat scroll left top;
}

li#Community a:hover,
li#Marketplace a:hover,
li#Info_Center a:hover{
background-position: 0 -40px;
}

li#Community a.active,
li#Marketplace a.active,
li#Info_Center a.active{
background-position: 0 -80px;
}

Here's the PHP I added to the Template.tpl.php to make the turn the primary links into images.

// Use icons for primary menu
function primary_links_icons_only() {
  $links = menu_primary_links();
  $level_tmp = explode('-', key($links));
  $level = $level_tmp[0];
/*   $output = "<ul class=\"links-$level\">\n"; */
  $output = "<ul class=\"primary-links\">\n";
  $l2i['pattern'] = '$(<a.*>)(.*)(</a>)$ie';
  $l2i['replacement'] = "\"\\1\".'<img src=\"/'. path_to_theme() .'/images/icons/'.str_replace(' ','_',strtolower('\\2')).'.png\" alt=\"\\2\" />\\3'";
  if ($links) {
    foreach ($links as $link) {
			$link = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']);
			$cssid = str_replace(' ', '_', strip_tags($link));
			$output .= '<li id="'.$cssid.'">'. preg_replace($l2i['pattern'],$l2i['replacement'],$link) .'</li>';
    };

  $output .= '</ul>';
  }
  return $output;
}

Here's the code I added to the page.tpl.php to print the above function:

  <?php if ($primary_links): ?>
      <div class="clearfix"></div>
      <div id="header-bottom">
   		 <?php print primary_links_icons_only(); ?>  
   		</div><!-- /header-bottom -->
      <?php endif; ?> 
      <div class="clearfix"></div>
     </div>
    </div> 

    <div id="navigation">
    
      <?php if ($navigation_right || $search_box): ?>
      <div id="navigation-right">
        <?php if ($search_box): ?>
        <div id="search-box">
          <?php print $search_box; ?>
        </div><!-- /search-box -->
        <?php endif; ?>
        <?php print $navigation_right; ?>
      </div><!-- /navigation-right -->
      <?php endif; ?>
      <?php if ($secondary_links): ?>
     		<div id="primary-menu">
      		<?php {print theme('links', $secondary_links);} ?>
      		</div>
      		<?php else: ?>
      		<div id="mission">
      		<?php print $mission; ?>
      		</div>
      	<?php endif?>
	   <!-- /primary_menu -->

I've updated the CSS on the live site... so if you log in to the live site (www.mycommunity.org) with the DrupalTest user. you should see the changes. I did not load the changes to the Dev site.