html - CSS background-position for icon only shows me last icon see code for more detail -

html - CSS background-position for icon only shows me last icon see code for more detail -

this html showing icon bar of reply, retweet, favorite.

<div id="twitter-actions" style="display: none; opacity: 0; margin-top: -20px;"> <div class="intent" id="intent-reply"><a href="https://twitter.com/intent/tweet?in_reply_to=481493696643608576" title="reply"></a></div> <div class="intent" id="intent-retweet"><a href="https://twitter.com/intent/retweet?tweet_id=481493696643608576" title="retweet"></a></div> <div class="intent" id="intent-fave"><a href="https://twitter.com/intent/favorite?tweet_id=481493696643608576" title="favourite"></a></div> </div>

this css showing bar.

#twitter-actions { width:75px; float:right; margin-right:5px; margin-top:3px; display:none; } .intent { width:25px; height:16px; float:left; } .intent a{ width:25px; height:16px; display:block; background-image:url(../images/tweet-actions.png); float:left; } .intent a:hover{ background-position:-25px 0px; } #intent-reply a{ background-position:0px 0px; } #intent-reply a:hover{ background-position:-25px 0px; } #intent-retweet a{ background-position:0px -17px; } #intent-retweet a:hover{ background-position:-25px -17px; } #intent-fave a{ background-position:0px -36px; } #intent-fave a:hover{ background-position:-25px -36px; }

the problem lastly icon appears couldn't solve problem myself asking much details can give you.

updated illustration of above html , css

if still isn't working, suggest using "inspect element" feature (available on modern browsers) see if css overriding wrote here (it this), seeing isolating code provided seems work fine.

additionally, browser plugins can effect way page displayed. advertisement blockers. seek running browser plugins disabled/turned off , see if fixes problem.

html css html5 css3 twitter-bootstrap