title: JQuery output is different from static sample
body: <p>I created a button using plain html from the jquery output below.  The static html is:</p>
  
  <pre><code>&lt;a id="button1" title="Reset" style="padding: .5em .5em .5em .5em;" 
  class="ctkit-button-light-gray 
         ctkit-button-rounded-light-gray 
         ctkit-button-enabled-light-gray"&gt;
  
      &lt;div style="display: table; width: 100%;"&gt;
  
          &lt;div style="display: table-cell; text-align: center;vertical-align: middle;"&gt;
              &lt;img src="/Images/reset.png" title="Reset" style="border: 0px; width: 1.5em; height: 1.5em;"&gt;
          &lt;/div&gt;
  
          &lt;div style="display: table-cell; text-align: center; vertical-align: middle;"&gt;
              &lt;span style="padding-left: 2px;"&gt; Reset&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Using css:</p>
  
  <pre><code>.ctkit-button-light-gray
  {
      font-size: 12px;
      font: "Arial, Helvetica, sans-serif"; 
      display: inline-block; 
  
      text-decoration:none;
      text-shadow: 0px 1px 1px rgba(0,0,0,0.3); 
  
  }
  
  .ctkit-button-rounded-light-gray
  {
      -webkit-border-radius:.4em;
      -moz-border-radius:.4em;
      border-radius:0.4em;
  }
  
  .ctkit-button-enabled-light-gray
  {
      cursor: pointer; 
      cursor: hand; 
      color:#474747;
      border: solid 1px #bcbcbc;
  
      background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e3e2e2));
      background:-moz-linear-gradient(top,  #ffffff,  #e3e2e2);
      background: -ms-linear-gradient(top,  #ffffff,  #e3e2e2);
      opacity:1;
      filters.alpha.opacity:100;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/VUVVw.jpg" alt="enter image description here"></p>
  
  <p>Notice that the image and text are vertically aligned.</p>
  
  <p>Now when I use jquery to create the button using the code:</p>
  
  <pre><code>var settings = $(this).data('ctkit-button').data;
  
  
  var id = $(this)[0].id;
  var style = '';
  
  
  var css = 'ctkit-button-' + settings.theme + ' ';
  if(settings.rounded)
      css += 'ctkit-button-rounded-' + settings.theme + ' ';
  else
      css += 'ctkit-button-normal-' + settings.theme + ' ';
  
  if(settings.enabled)
      css += 'ctkit-button-enabled-' + settings.theme + ' ';
  else
      css += 'ctkit-button-disabled-' + settings.theme + ' ';
  var div1 = $('&lt;div /&gt;',
  {
  }).attr('style', 'display: table; width: 100%; ');
  
  var div2 = $('&lt;div /&gt;',
  {
  }).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; ');
  
  style = 'border: 0px;';
  
  if(settings.width.length &gt; 0)
      style += 'width: ' + settings.width + '; ';
  if(settings.height.length &gt; 0)
      style += 'height: ' + settings.height + ';' ;
  
  var img = $('&lt;img /&gt;',
  {
      src : settings.image
  }).prop('title', settings.tooltip).attr('style', style); // 'border: 0px');
  
  $(div1).append($(div2).append(img));
  
  var div3 = $('&lt;div /&gt;',
  {
  }).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; ');
  
  var span = $('&lt;span /&gt;',
  {
  }).attr('style', 'padding-left: 2px;').html(settings.text);
  
  $(div1).append($(div3).append(span));
  $(this).append(div1);
  
  
  
  $(this).prop('title', settings.tooltip);
  $(this).attr('style', settings.padding);
  $(this).addClass(css);
  </code></pre>
  
  <p>where the value of settings is:</p>
  
  <pre><code>var settings = {
      _instance: "",
      theme: "light-gray",
      tooltip: "",
      image: "",
      padding: "padding: .5em .5em .5em .5em;",
      text: "",
      enabled: true,
      rounded: true,
      width: "",
      height: ""
  }
  </code></pre>
  
  <p>My button isnt vertically aligned and larger:
  <img src="https://i.stack.imgur.com/5d7cg.jpg" alt="enter image description here"></p>
  
  <p>and the thing is the static code I have above is taken from the jquery button control and i get the html using:
  var html = $('html').html();
  after its been created and just creating a static html file to see how it looks and it looks correct. </p>
  
  <p>So im baffled on what is going on and a fix for it.</p>