Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] Trying to use CSS sprites in widget (http://forum.bytesforall.com/showthread.php?t=18020)

aeriph Jul 20, 2012 11:01 PM

[SOLVED] Trying to use CSS sprites in widget
 
2 Attachment(s)
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?

aeriph Jul 21, 2012 12:18 AM

[SOLVED]

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 :)


All times are GMT -6. The time now is 05:20 PM.

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