JQuery output is different from static sample

Question

I created a button using plain html from the jquery output below. The static html is:

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

    <div style="display: table; width: 100%;">

        <div style="display: table-cell; text-align: center;vertical-align: middle;">
            <img src="/Images/reset.png" title="Reset" style="border: 0px; width: 1.5em; height: 1.5em;">
        </div>

        <div style="display: table-cell; text-align: center; vertical-align: middle;">
            <span style="padding-left: 2px;"> Reset</span>
        </div>
    </div>
</a>

Using css:

.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;
}

Notice that the image and text are vertically aligned.

Now when I use jquery to create the button using the 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 = $('<div />',
{
}).attr('style', 'display: table; width: 100%; ');

var div2 = $('<div />',
{
}).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; ');

style = 'border: 0px;';

if(settings.width.length > 0)
    style += 'width: ' + settings.width + '; ';
if(settings.height.length > 0)
    style += 'height: ' + settings.height + ';' ;

var img = $('<img />',
{
    src : settings.image
}).prop('title', settings.tooltip).attr('style', style); // 'border: 0px');

$(div1).append($(div2).append(img));

var div3 = $('<div />',
{
}).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; ');

var span = $('<span />',
{
}).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);

where the value of settings is:

var settings = {
    _instance: "",
    theme: "light-gray",
    tooltip: "",
    image: "",
    padding: "padding: .5em .5em .5em .5em;",
    text: "",
    enabled: true,
    rounded: true,
    width: "",
    height: ""
}

My button isnt vertically aligned and larger:

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.

So im baffled on what is going on and a fix for it.

Answer 1

I see that you are defining your HTML element using jQuery like this:

var div1 = $("<div />", {}).attr(...);

As a helpful tip, those curly braces would be where you could define various attributes, so there's really no need to chain the .attr() method.

var div1 = var div1 = $('<div />', 
    {'style': 'display: table; width: 100%; '}
);

Second, it appears that the img tag is the problem...the text looks centered, but the image looks slightly above center. Try adding the vertical-align: middle attribute in the styling for the image tag directly.

var img = $('<img />', {
    'src' : settings.image,
    'title': settings.tooltip,
    'style': 'vertical-align: middle; ' //add your other rules as well.
});

Here's a related SO post on some of the gotcha's with using display: table and vertical-align.

Vertically align text next to an image?

Good luck friendo.