Cree una capa flotante y no se ven los botones

[lavak00731]

Quiero hacer en un sitio que estoy trabajando una barra flotante con íconos de social media. Probé el código en el Dreamweaver localmente y funcionó. Pero cuando meto el código en Joomla, sólo se ven los puntos de la lista con la que quiero hacer el menú. Lo estoy tratando de hacer con sprites. Cabe aclarar que el sitio en el que estoy trabajando es [URL="http://ozzio.com.ar"]http://ozzio.com.ar[/URL] y lo que no se ven son las redes sociales


Paso a continuación el código html:

<div id="flotante">
<ul>
<li><a class="facebook" href="http://www.facebook.com/profile.php?id=100002080938644#!/profile.php?id=100002080938644" title="Seguinos en Facebook"></a></li>
<li><a class="twitter" href="http://twitter.com/OzzioDeco" title="Seguinos en Twitter"></a></li>
<li><a class="flickr" href="http://www.flick.com/photos/ozzio" title="Seguinos en Flickr"></a></li>
<li><a class="rss" href="http://ozzio.com.ar/index.php/blog.feed?type=rss" title="RSS Feed"></a></li>
<li><a class="youtube" href="http://www.youtube.com/user/OzzioDeco" title="Nuestro Canal de Youtube"></a></li>
<li><a class="newsletter" href="http://www.ozzio.com.ar/index.php/contacto.html" ></a></li>
</ul>

</div>

Código CSS

#flotante {
font-family: "arial narrow black";
font-size: 10px;
font-style: normal;
color: #000;
background-color: #280000;
text-align: center;
vertical-align: baseline;
clear: none;
float: right;
height: auto;
width: 25px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 10px;
overflow: visible;
position: fixed;
visibility: visible;
z-index: 1;
right: 0;
top: 110px;
margin-top: 35px;
margin-right: 0px;
margin-bottom: 35px;
margin-left: 25px;
border: 3px solid #fff;
border-right: none;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
a
/* Add the drop shadow */
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
box-shadow: 0 0 7px rgba(0, 0, 0, .6);
}

#flotante ul li {
display: block;
list-style:none;
margin-bottom:5px;
width:32px;
border: 2px outset #FFF;
}

#flotante a {
display:block;
width:32px;
background-image: url(../images/sprites.png);
margin: 0 auto;
}

.facebook {
background-repeat: no-repeat;
background-position: 0px 0px;
height: 32px;
width: 32px;
}

.facebook:hover {
background-repeat: no-repeat;
background-position: 0px -32px;
height: 32px;
width: 32px;
}

.twitter {
background-repeat: no-repeat;
background-position: 0px -64px;
height: 32px;
width: 32px;
}

.twitter:hover {
background-repeat: no-repeat;
background-position: 0px -96px;
height: 32px;
width: 32px;
}

.flickr {
background-repeat: no-repeat;
background-position: 0px -128px;
height: 32px;
width: 32px;
}

.flickr:hover {
background-repeat: no-repeat;
background-position: 0px -160px;
height: 32px;
width: 32px;
}

.rss {
background-repeat: no-repeat;
background-position: 0px -192px;
height: 32px;
width: 32px;
}

.rss:hover {
background-repeat: no-repeat;
background-position: 0px -224px;
height: 32px;
width: 32px;
}

.youtube {
background-repeat: no-repeat;
background-position: 0px -256px;
height: 32px;
width: 32px;
}

.youtube:hover {
background-repeat: no-repeat;
background-position: 0px -288px;
height: 32px;
width: 32px;
}

.newsletter {
background-repeat: no-repeat;
background-position: 0px -320px;
height: 32px;
width: 32px;
}

.newsletter:hover {
background-repeat: no-repeat;
background-position: 0px -352px;
height: 32px;
width: 32px;
}

A la espera de sus comentarios, les agradezco de antemano

[kseso?]

Así lo veo yo en ff:



¿cómo debería verse?

[daPhyre]

Lo veo igual que kseso? en Google Chrome.