Hi all, I have a button class that I wrote in CSS. It essentially displays block, adds some styles, etc. Whenever I add the class to a tags, it works fine - the a tag spans the entire width of its container like display:block should do... However, when I add the button class to an input button, Chrome, Safari, and Firefox all add a margin-right: 3px...
I've used the DOM inspector in both Chrome and Safari and NO WHERE should it be adding a extra 3px padding.
I tried adding margin: 0 !important; and/or margin-right: 0 !important to my button class in my CSS, but the browser STILL renders a 3px right margin!
Is this a known issue, and is there a CSS-based solution (i.e. not jQuery/javascript)
CODE FOLLOWS:
.button {
position: relative;
display: block;
margin: 0;
border: 1px solid #369;
color: #fff;
font-weight: bold;
padding: 11px 20px;
line-height: 18px;
text-align: center;
text-transform: uppercase;
cursor: hand;
cursor: pointer;
}
