Why isn't my image clickable in IE?
===

Hoping someone can help me with this problem I'm having w/ IE. So the page I am working on has an image containing Facebook, Twitter and Youtube tabs.

![enter image description here][1] 

All these tabs are clickable in most other browsers (Chrome/Safari/Firefox/Opera) except in Internet Explorer (7/8). I am not sure what I am doing wrong here, can anyone PLEASE help me?

HTML:

    <div id="head">
    	.
    	.
    	.
    	<div id="icons">
    		<ul class="nav1">
                <li></li>
    			<li><a id="facebook" rel="_blank" href="https://www.facebook.com"></a></li>
                <li><a id="twitter" rel="_blank" href="https://twitter.com"></a></li>
                <li><a id="youtube" rel="_blank" href="https://www.youtube.com"></a></li>
            </ul>
    	</div>
    	.
    	.
    	.
    </div>

CSS:

    #icons {
    	position:absolute;
    	top:44px;
    	right:200px;
    	z-index:9;
    	float:left;
    	width:105px;
    	height:30px;
    	background:url(/images/sprite_header_icons.png) no-repeat -6px 0;
    }
    #icons ul.nav1 li {
    	display: inline;
    	padding-left: 1px;
    }
    #icons ul.nav1 li a {
    	display: inline;
    	width: 34px;
    	height: 31px;
    }
    ul.nav1 li a:hover {
    
    }
    #icons ul.nav1 li a#facebook {
    	padding-left: 20px;
    	padding-right: 13px;
    	padding-bottom: 28px;
    }
    #icons ul.nav1 li a#twitter {
    	padding-left: 20px;
    	padding-right: 13px;
    	padding-bottom: 28px;
    }
    #icons ul.nav1 li a#youtube {
    	padding-left: 20px;
    	padding-right: 13px;
    	padding-bottom: 28px;
    }


  [1]: http://i.stack.imgur.com/xvs5v.jpg