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.
|
|
