Strange offset space between <button> as parent container and <div> as child.
- by Maxja
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!
