Hi everybody! Today I will share some workaround depending with margin-top bug in IE 7. I’ve just created a container DIV that has two child elements. The first child element has an absolute position and the second one has a relative position. Also, the second child element has top margin but this margin is ignored by IE7. The top margin for the relative positioned element is ignored because the previous sibling is an element with an absolute position.
<div id="container">
<div id="absolute-element"></div>
<div id="relative-element">some content</div>
</div>
|
#container {
position: relative;
width: 500px;
margin: 0;
}
#absolute-element {
position: absolute;
width: 100%;
height:100px;
margin: 0;
left: 0;
top: 50px;
}
#relative-element {
position: relative;
width: 100%;
margin-top: 100px; /* THIS MARGIN IS IGNORED! */
}
|
Workaround
My css hack is in adding a auxiliary DIV that clears floats etc. It helps!
<div id="container">
<div id="absolute-element"></div>
<div id="help"></div>
<div id="relative-element">some content</div>
</div>
|
#help {
margin: 0;
border: 0;
padding: 0;
clear: both;
float: none;
font-size: 1px;
}
|