Sliding doors HTML buttons in Safari Win

Posted by RyanP13 on Stack Overflow See other posts from Stack Overflow or by RyanP13
Published on 2010-10-11T20:42:57Z Indexed on 2011/01/15 22:53 UTC
Read the original article Hit count: 295

Filed under:
|
|

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

© Stack Overflow or respective owner

Related posts about css

Related posts about safari