homepage Welcome to WebmasterWorld Guest from 54.211.138.180
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Negative text indent property not working in firefox
Sharma




msg:4431268
 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]

 

rocknbil




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

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




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

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




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

<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




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

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




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

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




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

That's the code I gave you earlier :)

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

Sharma




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved