Hola a Todos:
 
Estoy trabajando en este[URL="http://ozzio.com.ar"] proyecto[/URL] y a la derecha en color marrón claro hay una barra flotante para colocar todas las redes sociales del sitio.
 
ingresé en la plantilla el siguiente 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="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="#" title="Suscribite a nuestro newsletter"></a></li>
</ul>
</div>
 
Y luego lo de estilo con este código en el CSS
 
#flotante {
	list-style:none;
	background-color: #d9cba0;
	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;
 
  /* 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: transparent url(../images/stories/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;
}
 
 
Lo probé previamente en dreamweaver y en html puro, anduvo lo más bien. En cambio en joomla sólo se deja ver la barra.
 
¿Qué puede suceder?
 
Desde ya muchas gracias 
  
 

