Sliding doors HTML buttons in Safari Win

Question

Hi,

I have the following HTML for buttons implementing sliding doors technique that look fine in everything but Safari on Windows:

<button type="submit">
    <span>Button</span>
</button>

This is the corresponding CSS:

button {
    background:url("../images/sprBgBtn.png") no-repeat right -47px;
    border:0;
    cursor:pointer;
    font-weight:bold;
    height:27px;
    line-height:27px;   
    overflow:visible;
    padding:0 26px 0 0;
    position:relative;
    text-align:center;
    text-transform:uppercase;
    width:auto;
}

button::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
    padding:0;
}

button span {
    background:url("../images/sprBgBtn.png") no-repeat left top;
    display:block;
    height:27px;
    line-height:27px;
    padding:0 0 0 26px;
    position:relative;
    white-space:nowrap;
}

If i omit the following code then the same issue will appear in FFOX:

button::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
    padding:0;
}

Answer 1

my guess is that button, being an inline element by default (unless you overrode its display property somewhere else in code that's not here), probably doesn't like the inner span being set to block, thus unexpected behavior on safari windows (and i'd assume other webkit browsers unless there's something particularly special abt the windows version of safari over the mac version or over google chrome).

Answer 2

It appears a reduction in right padding for Chrome and Safari solves the issue:

/* Safari and Google Chrome only - fix margins */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #icis_dashboard .submit_btn,
    #colorbox .submit_btn 
    {
        padding:0 23px 0 0;       
        }  

    #icis_dashboard .submit_btn span,
    #colorbox .submit_btn span {
        margin-top: -1px;
    }
}