0

Adding a Skype button with inline formatting is producing a Skype pic link with huge margins. CSS is not an option, must make this work with inline styling. The Skype button code being used is:

<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Call_auctionsafe_1" style="margin: 0px 0px 0px 0px;">
 <script type="text/javascript">
 Skype.ui({
 "name": "chat",
 "element": "SkypeButton_Call_auctionsafe_1",
 "participants": ["user1"],
 "imageSize": 16
 });
 </script>
</div>

This code produces the following result with or without the style/margin attribute ( style="margin: 0px 0px 0px 0px;" ) added:

This code produces the following result with or without the style/margin attribute added.

This is the desired result:

This is the desired result

How can the padding be eliminated so that the Skype pic fits right in with the surrounding text?

Mar Lam
  • 85
  • 2
  • 9

2 Answers2

0

The styles have been applied to the actual image itself so you can only do this with negative margins. Hacky but it works:

style="margin:-25px 0px 0px -15px;"

http://jsbin.com/havuledoci/edit?html,output

Rachel S
  • 3,780
  • 3
  • 24
  • 37
-1

Here is a simpler solution that overrides the margin.
!important will override the image margin even when forced by skype.

.skypeButton {
  margin: 0;
}
.skypeButton img {
  margin: 0 !important;
  vertical-align: middle !important;
}

used like this

<span class="skypeButton">
    <div id="SkypeButton_Chat_myaccountname">
        <script type="text/javascript">
            Skype.ui({
                "name": "chat",
                "element": "SkypeButton_Chat_myaccountname",
                "participants": ["myskypeaccount"],
                "imageSize": 12
            });
        </script>
    </div>
</span>

Taken from here https://faheart.com/47325/how-to-edit-skype-contact-me-button-css

Bernard
  • 1