oh man… this is one aspect I hate about JavaScript plugins and third-party widgets… they overwrite your css…
http://mayacove.com/dev/css/test_share_this.html
text-indent:-9999px; is not taking for the three links (the first three links in this div) associated with this “share this” plugin… (share, share-FB, share-TW…) how can I make this work please…
thank you very much…
believe it or not, I have another IE6 problem…
http://mayacove.com/dev/css/test_share_this.html
bg-for icons is messed up…
its’ actually a png problem (surprise!..
but the png problem is not caused by bg-image for the plugin (although that’s a png…) it’s caused by another png image on the page (which I have now included in my example…) I know it’s odd how I did the div for that and everything, but I couldn’t do bg-image for this png, IE6 would make it HUGE (I posted about that also here last week…) I have a no. of these “people” images that go on different pages… had to put them all in a div of same height and width as image to be on the safe side…
when I comment out this “person” image then the bg for the “share” buttons looks fine…
oh brother…
thank you very much…
oh my gosh – awesome!! you guys here are really geniuses…
Try adding this:
* html #linksShare a{overflow:hidden;}
That doesn’t mean you can’t overwrite it though. There is not float style in the rule so if you simply add a rule to your stylesheet then it will cascade into it.
.at300bs { [B]float:left;[/B] }
also, not 100% sure what you mean by “the little icon in front of the text”… you mean the white cross before the FB icon? (css for all three, cross, FB, TW, are generated by widget… now if they have display:block; why doesn’t text-indent work???)
The facebook icon is in front of the text in a span that is display block. text-indent only works on the first line of text. It doesn’t work for all the lines of text after a line break. Otherwise if you said text-indent:10px then all the text would be indented and not just the first line.
Hi,
The little icon in front of the text is set to display:block which moves the text to the next line and therefore text-indent isn’t working. Try floating the icon.
e.g.
.at300bs {
background:url("//s7.addthis.com/static/r07/widget22.png") no-repeat scroll 0 0 transparent;
display:block;
[B]float:left;[/B]
height:16px;
line-height:16px !important;
overflow:hidden;
width:16px;
}
.at300bs { [B]float:left;[/B] }
oh man, that worked!! thank you very much.. (I wonder why FB link has that empty span, TW link doesn't have it.. my text is outside that span...)
thank you very much.......:-)but I cannot overwrite what’s in this class, .at300bs
the entire class – and what’s in it – is generated by the widget…
also, not 100% sure what you mean by “the little icon in front of the text”… you mean the white cross before the FB icon? (css for all three, cross, FB, TW, are generated by widget… now if they have display:block; why doesn’t text-indent work???)
that class, .at300bs, is in widget46.css (which u can see in Firebug), but I have no access to modify this stylesheet (and my styles in my own css is overwritten by this widget46.css…)
in my own stylesheet, I have
#linksShare a {float:left; display:inline-block; background:url(‘links_share.jpg’) no-repeat; text-indent:-9999px; }
but it’s not taking…
thank you…
oh – awesome… thank you… had no idea you could apply to specific elements…
(interesting that it works only if apply to div containing image, not to the image itself…)
thank you very very much…
Hi,
The images seem ok on first load but on refresh they get corrupted somehow.
I’m not sure this is much use but if you exclude the images in the top bar from the pngfix then they seem to work ok.
e.g.
<script type="text/javascript">
$(document).ready(function() {
[B] $('div.person1').pngFix();[/B]
$('a.at300m').hover(
function() {/*alert('test');*/ $('div#shareHover').show(); },
function() { $('div#shareHover').hide(); }
);
/* $("#linksShare").delegate("a#share", "hover", function(){
$('div#shareHover').show();
}); */
});
</script>
I couldn’t see another solution I’m afraid.