I have gone ahead and reworked your sprite nav with the replacement text I was talking about.

Updated page:

and css:

If you view the page with images turned off you will see the text and it will still make sense.

I have made a lot of comments in the CSS so it should be easy to follow. I'll give it a quick rundown here though. What we are doing is layering an empty <b> element on top of the text. We are using a <b> since it is an inline element so it can be legally nested in the anchor.

Rather than setting multiple background positions for the different pseudo states we can just raise the <b> element up with negative top margins. That <b> element is actually set at the same height as your sprite image (117px) but the anchor is set to 39px height with overflow:hidden; to hide the oversized <b>.

The x-axis BG positions are still needed, the end result is a much leaner set of rules that is actually doing more work.

The html:
        <ul id="main">
            <li><a class="home" href="index.html">home<b></b></a></li>    
            <li><a class="about" href="about.html">about<b></b></a></li>        
            <li><a class="events" href="events.html">events<b></b></a></li>
            <li><a class="partners" href="partners.html">partners<b></b></a></li>
            <li><a class="contact" href="contact.html">contact<b></b></a></li>
            <li><a class="testimonials" href="testimonials.html">testimonials<b></b></a></li>
and the CSS:
Code CSS:
/*=== Sprite Navigation with Replacement Text ===*/
#main {
    height: 39px;
    padding-left: 10px;/*push first link 10px to the right*/
    background: #4A4743 url(site_images/nav_extra.gif) repeat-x;
#main li, #main a {
    float: left;
#main a {
    height: 39px;
    overflow: hidden;/*hide the 117px tall <b> element*/
    position: relative;/*containing block for AP'd <b>*/
    /*styles below for images off */
    color: #FFF;
    text-align: center;
    font: bold 13px/36px arial;
/* Style for images off on pseudo states */
#main a:active,
#main a:focus,
#main a:hover {
    color: #FFF;
    background: #333;
    cursor: pointer;/* IE6/7 */
/* Set all the class widths one time only*/
#main a.home {width: 48px;}
#main a.about {width: 87px;}
#main a.events {width: 86px;}
#main a.partners {width: 97px;}
#main a.contact {width: 99px;}
#main a.testimonials {width: 126px;}
#main a b {/* Sprite image applied to the <b> element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 117px;/* full height of sprite image */
    background: url(site_images/nav_sprite.jpg) no-repeat;
/* Eliminate multiple BG positions on pseudo states by using neg margins */
#main a:hover b {margin-top: -39px}
#main a:active b {margin-top: -78px}
/* Set the mandatory x-axis positions */
#main a.home b {background-position: 0px 0px;}
#main a.about b {background-position: -48px 0px;}
#main a.events b {background-position: -135px 0px;}
#main a.partners b {background-position: -221px 0px;}
#main a.contact b {background-position: -318px 0px;}
#main a.testimonials b {background-position: -417px 0px;}