AddThis buttons CSS problem

Question

I have asked this question on the AddThis forum but have not had any replies so far. Hopefully someone can help me on this.

The page in question is on http://preview.ami.co.nz/products, in the bottom right corner.

• If viewed in Chrome or Firefox the word "Share" is to the left of the orange "+" AddThis button.

• However, on IE (at least IE8 and 6) the word "Share" is to the right! It is supposed to look like it does on Chrome and FF but I can't figure out what IE is doing to it.

  

To make things even more peculiar - the very same code on a different page looks correct in all browsers! Check out http://preview.ami.co.nz

Any suggestions would be greatly appreciated.

PS. Here's the markup I put on those pages:

<!-- AddThis Button BEGIN -->
  <div class="addthis_toolbox addthis_default_style" style="display: <%= SocialMediaVisibility %>">
    <a class="addthis_button_compact">Share</a>
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_email"></a>
  </div>
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e0a5ac2480330c8"></script>
<!-- AddThis Button END -->

Answer 1

just change the HTML of your website from

<a class="...">
<span class="the_icon_class"></span>
share
</a>

to

<a class="...">
<span>share</span>
<span class="the_icon_class"></span>
</a>

Answer 2

@DanyW, i saw you website code may be there is the problem with your class specifications. In your product page you specify float:right in .addthis_default_style .at15t_compact & float:left .addthis_default_style .at300bs. So, in firefox & chrome it's takes float:right & in IE it's take float:left & it's work fine in other page's because you specify your class much more clear then products page reason you specify float:right in #pageBottom .footerPanel .addthis_default_style .at15t_compact now the priority of float:right is increased.

solution: write this

#pageBottom .footerPanel .addthis_default_style .at15t_compact{float:right}

in product page

or you do this

.addthis_default_style .at15t_compact{float:right !important}

Answer 3

This should do the trick. Just add this rule to the end of your stylsheet:

.addthis_default_style.addthis_toolbox span{
    line-height: 16px;
    float: right; /* this will move the span back over to the right */
}

Answer 4

You have below style in http://preview.ami.co.nz/styles/ami.css file

.addthis_default_style .at15t_compact
{
    float: right;
    margin-left: 4px;
    margin-right: 0;
}

in FF the span for share link is taking float: right but in IE the span is not taking float right, because of this you are seeing share text on right side of the addthis button.

I think adding important to float right will help you.

  float: right !important;

otherwise use IE specific styles. Check http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/ and http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer