Question

I have problem with CSS <buttons> in Google Chrome, it shows space between <buttons>, but in Opera and IE it is OK, why?

Here is the full CSS code:

button {
    border: 1px solid #bdbdbd;
    text-shadow: 0 1px 1px white;
    font: bold 11px Sans-Serif;
    padding: 6px 8px;
    white-space: nowrap;
    vertical-align: middle;
    color: #666;
    background: -webkit-linear-gradient(top, white, #E0E0E0);
    background:    -moz-linear-gradient(top, white, #E0E0E0);
    background:     -ms-linear-gradient(top, white, #E0E0E0);
    background:      -o-linear-gradient(top, white, #E0E0E0);
    cursor: pointer;
    text-decoration: none;
    margin-right: -1px;
}

Here is HTML code:

<div><button type="button">Send</button><button type="button">Reset</button></div>

Thanks for help.

Answer 1

Seems to be a left margin as well. This corrects it in Chrome (not sure what it’ll do in other browsers)… I edited the margin property.

button {
border: 1px solid #bdbdbd;
text-shadow: 0 1px 1px white;
font: bold 11px Sans-Serif;
padding: 6px 8px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background:    -moz-linear-gradient(top, white, #E0E0E0);
background:     -ms-linear-gradient(top, white, #E0E0E0);
background:      -o-linear-gradient(top, white, #E0E0E0);
cursor: pointer;
text-decoration: none;
margin: 0 -1px 0 0;
}