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

Movie

I am able to reproduce this although I can't determine what CSS in question is causing it to behave as such. – Potentiate

unrelated to the question: FYI and for a coding practice your SocialMediaVisibility variable should output none or inline, as today you output: <div class="addthis_toolbox addthis_default_style" style="display: "> witch is not a good example of good codding ;) – Tablet

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>

Cakewalk

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}

Congeneric

I tried both of your suggestions on a dev site but they didn't do anything unfortunately. – Movie

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 */
}

Illusage

That didn't do it for me... all the buttons were vertically stacked along the right edge of the container – Movie

Did you copy the code exactly? Put it right at the end of your style sheet. I tested the code in all browsers and it works for me . The only thing I find very strange is that in IE your css link is some crazy /wax.axd/cache/eQOauGa04Wrfpxa$sO70Bg5D.css instead of your normal ami.css – Illusage

Yup! I copied the code exactly. And that crazy css link is the result of Aptimize caching. I tried your code out in our dev environment, which is not running Aptimize. – Movie

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

Baud

Answer 5

Try this one out

.at300bs.at15nc.at15t_compact { float:right; }

For some reason IE is chocking with the selector and floating it left, instead of right.

Kola

Answer 6

.addthis_default_style .at15t_compact
{
    float: right !Important;

}

The important part is the "!Important"

Should fix this weird IE glitch.

Vincenz

Answer 7

Both Matthew and Pavel's solutions will work, if you add "!important" to the CSS.

Or you could move the word "Share" to a separate button:

<div class="addthis_toolbox addthis_default_style">
  <a class="addthis_button" style="float: left">Share</a>
  <a class="addthis_button_compact"></a>
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_email"></a>
</div>

You may also want to consider removing the "addthis_default_style" class name, and defining the styles yourself (to avoid issues down the road if AddThis changes their CSS). Here's what that might look like:

<div class="addthis_toolbox">
  <a class="addthis_button">Share</a>
  <a class="addthis_button_compact"></a>
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_email"></a>
</div>

<style>
  .addthis_toolbox {
    margin-top: -27px;
    float: right;
  }
  .addthis_toolbox a {
    display: block;
    float: left;
    margin-left: 5px;
  }
</style>

Doughman

Answer 8

It's an old problem with floats. Actually even ie9 has it. You can add some styles to fix it:

.addthis_button_compact{
    position: relative;
    padding:0 23px 0 0;
}
.addthis_button_compact span{
    position:absolute;
    right:0;
}

Virescence

That's getting close I think. The result is this: i1098.photobucket.com/albums/g374/AMI_DanyW/… - not quite there but I'm not sure what to do next. – Movie

Increase padding: for example padding:0 50px 0 0; – Littlefield

DanyW, rules added by addthis have higher specificity, than added by you, so padding for .addthis_button_compact doesn't apply. Try to use more specific selector, e.g #pageBottom .addthis_button_compact – Virescence