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;
}
|
Thanks for the clever tip on the workaround, worked very well to solve the problem.
Just the solution that I was looking for. Thanks….
Works really fine ! Thank’s a lot !
Very nice fix! Thanks for the help. I didn’t know that quirk existed until now.
It is my problem! thanks
Thanks….~