hover, list, y links

[nfa1218]

hola amig@s.

estoy con un problemita con el CSS/HTML de un sitio que estoy armando.

basicamente anda PERFECTO lo que quiero lograr en los navegadores MENOS en INTERNET EXPLORER..
anda bien en chrome, firefox y safari... y en mi celular nokia tambien lo veo bien que tiene navegador opera..
pero en IE se me mueven los LI y los botones del social media.

les dejo los codigos, quizas se me escapó algo..

HTML

Código:

                <div class="social-media-header">
                <ul class="social-media">
                	<a href="http://www.facebook.com/guiaelasesor" target="_blank"><li class="facebook"><span class="hidden-text">Facebook</span></li></a>
                    <a href="https://twitter.com/#!/guiaelasesortuc" target="_blank"><li class="twitter"><span class="hidden-text">Twitter</span></li></a>
                    <a href="http://www.youtube.com/ElAsesorTuc" target="_blank"><li class="youtube"><span class="hidden-text">Youtube</span></li></a>
                </ul>
                </div>

CSS

Código:

.social-media-header {
	float: right;
	margin: -100px -20px 0 0;
}
ul.social-media {
	list-style: none;
	width: 144px;
	margin: 0px;
}
ul.social-media a:link {
	float: left;
}
ul li.facebook {
	width: 48px;
	height: 48px;
	background: url(http://guiaelasesor.com.ar/yerbabuena/wp-content/themes/twentyten/images/social-meda-facebook-hue.png) center no-repeat;
}
ul li.facebook:hover {
	width: 48px;
	height: 48px;
	background: url(http://guiaelasesor.com.ar/yerbabuena/wp-content/themes/twentyten/images/social-meda-facebook.png) center no-repeat;
}
ul li.twitter {
	width: 48px;
	height: 48px;
	background: url(http://guiaelasesor.com.ar/yerbabuena/wp-content/themes/twentyten/images/social-meda-twitter-hue.png) center no-repeat;
	margin-left: -15px;
}
ul li.twitter:hover {
	width: 48px;
	height: 48px;
	background: url(http://guiaelasesor.com.ar/yerbabuena/wp-content/themes/twentyten/images/social-meda-twitter.png) center no-repeat;
}
ul li.youtube {
	width: 48px;
	height: 48px;
	background: url(http://guiaelasesor.com.ar/yerbabuena/wp-content/themes/twentyten/images/social-meda-youtube-hue.png) center no-repeat;
	margin-left: -15px;
}
ul li.youtube:hover {
	width: 48px;
	height: 48px;
	background: url(http://guiaelasesor.com.ar/yerbabuena/wp-content/themes/twentyten/images/social-meda-youtube.png) center no-repeat;
}

entiendo que quizas estoy utilizando codigos de mas, o que quizas hay una forma mas adecuada al w3s para lograr lo que ya arme, pero lo que realmente me interesa en este punto es seguir rapidamente adelante con el sitio y que funcione IGUAL en IE que en los otros navegadores.. agradesco sus respuestas. gracias.

**siempre tengo problemas con IE cuando estoy armando sitios :P

edit: me olvide el link al sitio... es http://guiaelasesor.com.ar/yerbabuena/