Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Negative text indent property not working in firefox


Sharma - 12:49 pm on Mar 20, 2012 (gmt 0)


Hi guys, First post here.
This is probably a questions that's been answered somewhere but I can't seem to find an answer that works for me after googled it.

I've used a negative text indent property in my css to hide the 'bullet points' for an unordered list of 3 links used as social media buttons. It works perfectly in google chrome and safari but not in firefox.
Would appreciate the help, thanks.
Here's my code:

HTML:

<div id="featureside">
<div id="follow">Follow Me</div>
<div class="sm-btns">
<ul>
<li class="fb_btn"><a href="http://www.facebook.com/pages/Sharma-Yelverton-Original-Music-For-Film/108718032486650?sk=wall">facebook</a></li>
<li class="yt_btn"><a href="http://www.youtube.com/user/SharmaYelverton?feature=mhee">youtube</a></li>
<li class="sc_btn"><a href="http://soundcloud.com/scymusic">soundcloud</a></li>
</ul>
</div>

</div>
</div>


CSS:

.custom #featureside {width:229px; height:251px; background:transparent url(images/SM-Widget.gif)no-repeat; text-align:center; float:right; margin-right:15px; margin-top:-10px;}
.custom #follow {background:transparent; margin-top:22px; font-size:14px; margin-bottom:20px}
.sm-btns ul li a {background:transparent; display:block; color:red; text-indent:-9999px; width:142px; margin-left:auto; margin-right:auto; margin-top:5px;}
li.fb_btn a:link, li.fb_btn a:visited {width:142px; height:53px; background:transparent url(images/fb-logo.gif)no-repeat;}
li.fb_btn a:hover {width:142px; height:53px; background:transparent url(images/fb-logo_over.gif)no-repeat;}
li.yt_btn a:link, li.yt_btn a:visited {width:142px; height:53px; background:transparent url(images/yt-logo.gif)no-repeat;}
li.yt_btn a:hover {width:142px; height:53px; background:transparent url(images/yt-logo_over.gif)no-repeat;}
li.sc_btn a:link, li.sc_btn a:visited {width:142px; height:53px; display:block; background:transparent url(images/sc-logo.gif)no-repeat;}
li.sc_btn a:hover {width:142px; height:53px; background:transparent url(images/sc-logo_over.gif)no-repeat;}

[edited by: alt131 at 5:48 pm (utc) on Mar 20, 2012]
[edit reason] Thread Tidy [/edit]


Thread source:: http://www.webmasterworld.com/css/4431266.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com