1. Home
  2. Forums Index
  3. Browser Side / CSS 2:54 am May 21, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Negative text indent property not working in firefox

         

Sharma

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

10+ Year Member



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]

rocknbil

4:23 pm on Mar 20, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ha. saw this one coming. :-) Welcome aboard Sharma. At least, I'm pretty sure this is what it is, I get it sometimes too.

You have this on your parent,

.custom #featureside {text-align:center;}

which, when combined with the text indent,

.sm-btns ul li a { display:block; text-indent:-9999px; }

moves it back into view. It's indented 9999px, but it's also centered. :-)

Add a text-align: left to the "a" selector and it will probably go out of the viewport. Be sure to also add outline: none or when active (click and hold down) the outline will give you away. :-)

Paul_o_b

9:47 pm on Mar 20, 2012 (gmt 0)

10+ Year Member



If you meant the default bullet markers for the ul then why not just switch them off? 


.sm-btns ul{
margin:0;
padding:0;
list-style:none;
}


If you meant real html content then the post above should fix that :)

rocknbil

4:08 pm on Mar 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<facepalm> I saw "text-indent" and my head went to actually indenting the text. :-/ Text-indent won't work on bullet points (or shouldn't,) you can use display:inline or list-style: none on the list items.

Sharma

10:47 am on Mar 22, 2012 (gmt 0)

10+ Year Member



Thanks for the quick replays guys. I've tried all of your suggestions but it's still not working. I'm completely stumped.

I'm using the thesis them for wordpress so I'm wondering if it's something related to that. Will post the query in the thesis forum as well just in case.

My css has changed a little bit now. (html is still the same). 


.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 {width:142px; margin-left:auto; margin-right:auto; margin-top:5px; background:transparent; display:block; text-align:left; text-indent:-9999px; outline:none; list-style:none;}

li.fb_btn a:link, li.fb_btn a:visited {height:53px; width:156px; padding:0px; outline:none; text-indent:-9999px; background-image:url('images/facebook_sprite.png'); background-position:0 0;}
li.fb_btn a:hover {background-position:0 -53px;}

li.yt_btn a:link, li.yt_btn a:visited {height:53px; width:156px; padding:0px; outline:none; text-indent:-9999px; background-image:url('images/youtube_sprite.png'); background-position:0 0;}
li.yt_btn a:hover {background-position:0 -53px;}

li.sc_btn a:link, li.sc_btn a:visited {height:53px; width:156px; padding:0px; outline:none; text-indent:-9999px; background-image:url('images/soundcloud_sprite.png'); background-position:0 0;}
li.sc_btn a:hover {background-position:0 -53px;}



Thanks for the help.

Sharma

11:21 am on Mar 22, 2012 (gmt 0)

10+ Year Member



Ha ha. I've solved it. I have no idea why. I had been trying to add that previously mentioned styling to .sm-btns ul li a {} with no effect at all.

When I added a new line with only .sm-btns ul {list-style-type:none} it worked.

Finally!

Now I just need to get it fixed for internet explorer 8 and older. lol.

Thanks for the help guys.

Paul_o_b

9:17 pm on Mar 22, 2012 (gmt 0)

10+ Year Member



That's the code I gave you earlier :)

The bullet is on the list element not the anchor so you target the ul.

Sharma

9:50 pm on Mar 22, 2012 (gmt 0)

10+ Year Member



Yeah thanks, realised that after. Wasn't reading carefully. Plus I'm still a bit hazy on the finner points of css selectors.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:54 am May 21, 2026