[SOLVED] Trying to use CSS sprites in widget

aeriph · #1 Jul 20, 2012, 11:01 PM

I'm trying to set up follow & subscribe buttons in a sidebar widget. The code works perfectly from local standalone HTML and CSS files, but goes wrong when I use it on the site in Atahualpa.

CSS:

Code:

ul#subscrList {
	width: 179px; height: 60px;
	margin: auto; padding: 0;
	position: relative;
	font-size:0px;
}

ul#subscrList li {
	margin: 0; padding: 0; list-style: none;
	position: absolute; top: 0;}

ul#subscrList li, ul#subscrList a {
	width:58px; height: 61px; display: block;}

li#rssBut {left: 0; background: #f09936 url('http://static.eastasiastudent.net/img/subscribe_buttons.png') 0px 0px no-repeat;}
li#fbBut {left: 59px; background: #4a6699 url('http://static.eastasiastudent.net/img/subscribe_buttons.png') -61px 0px no-repeat;}
li#twBut {left: 118px; background: #6bc1db url('http://static.eastasiastudent.net/img/subscribe_buttons.png') -122px 0px no-repeat;}

li#rssBut a:hover {
	background: #f0b26c url('http://static.eastasiastudent.net/img/subscribe_buttons.png') 0 -61px no-repeat;}
li#fbBut a:hover {
	background: #668dd4 url('http://static.eastasiastudent.net/img/subscribe_buttons.png') -61px -61px no-repeat;}
li#twBut a:hover {
	background: #9ecddb url('http://static.eastasiastudent.net/img/subscribe_buttons.png') -122px -61px no-repeat;}

HTML in the widget:

HTML Code:

<ul id="subscrList">
<li id="rssBut"><a href="rss">rss</a></li>
<li id="fbBut"><a href="f">facebook</a></li>
<li id="twBut"><a href="t">twitter</a></li>
</ul>

Site is at: http://eastasiastudent.net/ and you can see what happens in the widget. It seems like the lis are all shunted to the right by 13 pixels (try hovering one of them to see what happens).

Width of the sidebar is set to 235 with padding 0px 10px 0px 10px, and the widget container has padding 10px 0 10px 0.

Bearing in mind that this works perfectly in standalone files, I think there must be some other bit of CSS or something in Atahualpa that's affecting it. Any ideas what that might be so that I can account for it in the code?