Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Trying to use CSS sprites in widget

Old Jul 20, 2012, 11:01 PM
13 posts · Sep 2010
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.

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

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>
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?
Attached Thumbnails
Click image for larger version

Name:	inwidget.jpg
Views:	429
Size:	4.3 KB
ID:	1953  Click image for larger version

Name:	standalone.jpg
Views:	428
Size:	3.4 KB
ID:	1954  
Old Jul 21, 2012, 12:18 AM
13 posts · Sep 2010

So I managed to track down the line in the CSS that was causing problems:

div.widget ul li {
padding: 1px 5px 1px 14px !important;
background: url('/wp-content/themes/atahualpa/images/bullets/gray-arrow.gif') no-repeat 0 4px;

I just took that out as I'm fine with the plain formatting anyway. Now the CSS sprite works as intended


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
how to use linked image sprites using css? over_cloud9 Center area post/pages 1 Jul 25, 2012 10:44 AM
Sociable sprites not used in Atahualpa sidejack Plugins & Atahualpa 2 Sep 17, 2011 09:35 AM

All times are GMT -6. The time now is 02:24 PM.

Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.