Strange offset space between <button> as parent container and <div> as child.

Question

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

body { background: *red*; }
button, div { 
outline: 0; margin: 0; border: 0 none; padding: 0; 
font-size: 0; line-height: 0;
display: block;
}
button {
width: *150*px; 
height: *50*px; 
background: *green*; 
position: relative;
}
div {
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!

---

I tried to solve this problem in many ways, but still I don't get correct results. Internet Explorer showing like this:

and Firefox like this:

.

Other browsers are correct.

Answer 1

<button> usually has margin, padding, and border set by the browser's default CSS. Clearing those is usually my first step with making sense of the dimensions of the element itself and its children.

You also might try setting the button to be display: inline-block (and -moz-inline-box for Firefox < 3), which might give you a little more direct control of its styles and those of its children.