I need to decorate a standard html button. The base element I took <button> instead of <input>, cos I decided that the element must be a parent container. And there is child element <div> in it. This <div> element will be been the core element for decoration, and should occupy the entire space of the parent element - button.

<button>
<div>*decoration goes here*</div>
</button>

And within Cascading Style Sheets it might be looks like this:

css

button {
margin: 0; 
border: 0; 
padding: 0; 
width: *150*px; 
height: *50*px; 
position: relative;
}
div {
margin: 0; border: 0; padding: 0; 
width: 100%; height: 100%; 
background: *black*; 
position: absolute; 
top: 0; left: 0;
}

html

<button type="button">
<div>*decoration goes here*</div>
</button>

So, Opera(10) is doing well, webkits Chrome(6) and Safari(4) is doing also well,

but Internet Explorer(8) is bad - DOM Inspector shows some strange Offset space in top and left, FireFox(3) is also bad - DOM Inspector shows that <div> get some negative value in css-property right: and bottom:. Even if this property will set to zero(0) DOM-Inspector still shows same negative value.

I almost broke my brain. Help me, solve this problem, please!