demo buttons for ie

by 100thGear

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<table class="data-table">
    <thead>
        <tr>
            <th class="static-column">ID#</th>
            <th class="static-column xlarge">Group(s)</th>
            <th class="static-column large">Part Code (P.C)</th>
            <th>Description</th>
            <th class="static-column xlarge">Supplier</th>
            <th class="static-column large">Supplier P.C</th>
            <th class="static-column">LOC</th>
            <th class="static-column">QTY</th>
            <th class="static-column large">Unit Cost (CND)</th>
            <th class="static-column">Actions</th>
        </tr>
    </thead>
    <tbody>
                <tr>
            <td>30</td>
            <td>DM510e, FOO</td>
            <td>DM_</td>
            <td>No Description</td>
            <td>Custom Foam</td>
            <td>SPC_</td>
            <td>X</td>
            <td>0</td>
            <td>0</td>
            <td><span>
                <a href="http://127.0.0.1/inventory/editItem/30" class="ui-btn" data-icon-only="ui-icon-pencil" title="Edit Item">Edit Item</a>
                <a href="http://127.0.0.1/inventory/deleteItem/30" class="ui-btn ui-btn-delete" data-icon-only="ui-icon-trash" title="Delete Item">Delete Item</a>
            </span></td>
        </tr>    </tbody>
</table>

CSS

body,html {
    padding: 6px 0px;
    width: 100%;
    font-family: Verdana,Arial,sans-serif;
}
.small {
    font-size: 89%;
    padding: 0;
}
.xsmall {
    font-size: 68%;
    padding: 0;

}
.data-table {
    width: 100%;
    font-size: 90%;
    background-color: #fff;
    border: 1px solid #666;
}
.data-table th, .data-table td span {
    white-space: nowrap;
    text-align: center;
}
.data-table td {
    font-size: 90%;
    color: #222;   
}
.data-table td, .data-table th {
    padding: 6px;
    border-right: 1px solid #999; 
}
.data-table td:last-child, .data-table th:last-child {
    border: none; 
}
.data-table tbody tr {
    border: 1px solid #666; 
}
.data-table tbody tr:nth-child(odd) td {
    background-color: #efefef;
}
.static-column {
    width: 1em;
}
.static-column.large {
    width: 3.25em;
}
.static-column.xlarge {
    width: 6.5em;
}

JavaScript

function StyleButton(elm) {
    if( elm.getAttribute('data-icon-only') || elm.getAttribute('data-icon') ) {
        $(elm).button({
            icons: {
                primary: elm.getAttribute('data-icon') || elm.getAttribute('data-icon-only')
            },
            text: elm.getAttribute('data-icon-only') ? false : true
        });
    } else {
        $(elm).button();
    }
    
    if( elm.getAttribute('data-disabled') ) {
        $(elm).button('option', 'disabled', true);
    }
}

$('.ui-btn').each(function() {
    StyleButton(this);
});