Any suggestions why this hover effect isnt working?

After a google search I'v tried adding z-index:1; to my hover element which didnt work.
I'v also tried updating my <!doctype> and that didnt work.
Im thinking it is my hit area but im not sure why this isn't working as I have defined the height and width of my element.

Here is a URL to the website. Its the two black and white images on the top right of the page. If you hover just to the left of the euroirp image you can see it working, so I guess the hit areas are off somehow..?

www.asiairp.com

Here is my HTML:
HTML Code:
        <div class="main_header">

		<div class="sister_companies">
                    <a href="http://www.investorside.org/" target="_blank" class="investorside_btn_container"></a>
                    <a href="http://www.euroirp.com/" target="_blank" class="euroirp_btn_container"></a>
    	       </div>

         </div><!--main_header-->
Heres my CSS:
HTML Code:
.main_header {
	position:relative;
	margin:0px;
	padding:0px;
	width:960px;
	height:125px;
	overflow:hidden;
	}
	
.sister_companies{
		float:right;
    	        position: absolute;
    	        right: 15px;
		font-size:12px;
		color:#AAA;
		}

.sister_companies a{	
			margin: 0px 0px 0px 20px;
		}
		
.euroirp_btn_container {
	display:block;
	background:url(../company_logos/euroirp.png);
	height:30px;
	width:94px;
	float:right;
	}
	
.euroirp_btn_container:hover {
	background-position:0 -30px;
	}
	
.investorside_btn_container {
	display:block;
	background:url(../company_logos/investorside.png);
	height:30px;
	width:107px;
	float:right;
	}
	
.investorside_btn_container:hover {
	background-position:0 -30px;
	}
Any help is always appreciated. Thanks!