Button with image Test

by paulwesterberg

HTML

<button class="_repCalLnkPrev imgBtn" title="Previous (Alt+Shift+P)" type="button" value="Previous" sys:command="ReportCalendar.cmd.Previous"><img class="imgCslReportCalSprites imgSPrevious btnImg" src="Shell/Images/transparent.gif" __imageClass="imgCslReportCalSprites imgSPrevious btnImg"><span class="imgTxt">Previous</span></button>


<br/>
<button id="ctl_DepartmentCalend_4_btnRefresh" class="imgBtn" title="Reload the calendar (Alt+Shift+R)" type="button" sys:command="DeptCalendar.cmd.Refresh">
    <img class="imgCslDeptCal imgSrefresh btnImg" src="Shell/Images/transparent.gif" __imageClass="imgCslDeptCal imgSrefresh btnImg"></button>

<br/>

<button class="_repCalLnkNext imgBtn" title="Next (Alt+Shift+N)" type="button" value="Next" sys:command="ReportCalendar.cmd.Next">
    <div style="display: table-row">
    <img style="display: table-cell" class="imgCslReportCalSprites imgSNext btnImg" src="Shell/Images/transparent.gif" __imageClass="imgCslReportCalSprites imgSNext btnImg">
    <span style="display: table-cell" class="imgTxt">Next</span>
    </div>
</button>

CSS

input[type='submit'], input[type='button']
{
    margin: 1px 3px;
}

button
{
    position: relative;
    cursor: default;
    overflow: visible; /* removes extra side padding in IE */
    margin: 1px 3px; /* setting to 2px has strange effects (causes getBoundingClientRect to return a top value that is too high) in IE8 standards document mode when trying to position the selection panel against an entry field.  Be sure to test that if you change this value */
    white-space: nowrap; /* cut off text with ellipsis on a button, rather than wrapping, to respect height/width attributes         -- commenting out for now, because this erroneously truncates last couple characters when             combined with float:left image, as we need to do in footer     text-overflow: ellipsis; */
    outline: transparent solid 1px;
    border: 1px solid transparent;
    padding: 1px 5px 2px 5px;
    font-size: 1em;
    min-height: 24px; /* see core.IE8.css for overrides specific to IE8*/
    min-width: 24px; /* min width so we never have an unusably small button */
    border-color: #BBB #999 #999 #BBB;
    color: #000;
    background: #E4E8F1 url('images/20px-top-to-bottom.png') repeat-x top;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px; /*box-shadow: 1px 1px 1px #999;     -webkit-box-shadow: 1px 1px 1px #999;     margin: 0px 1px 1px 0px;*/    
}
button::-moz-focus-inner /* remove unwanted padding in FF buttons. unfortunately, the padding: 1px 3px; cannot be removed in Chrome and Safari */
{
    border: 0px;
    padding: 0px;
}
button > *
{
    margin: 0px;
    padding: 0px;
    white-space: normal;
}

/* caption */
button > span
{
    display: inline-block;
}

/* block elements within the button need to be manually moved on press in IE */
button:active > div
{
    top: 1px;
    left: 1px;
}
button[disabled]:active > div
{
    top: 0px;
    left:...