Archive for the ‘ie7’ Category
Absolute elements ignore z-index in IE6 and IE7
In this article I will show an example of how to fix the IE 6-7 bug when absolute elements ignore z-index CSS property. In the screenshot above you can see the problem. In the sample below you can see how these styles work in your browser:
HTML:
<div id="column1">1<div id="absoluteDiv"></div></div> <div id="column2">2</div> |
CSS:
#column1, #column2 { display: block; position: relative; float: left; width: 100px; margin: 5px; padding: 5px; border: 1px solid red; } #absoluteDiv { display: block; position: absolute; top: 5px; left: 20px; width: 200px; height: 30px; background-color: yellow; border: 1px solid orange; z-index: 10000; } |
To fix the bug you need to add z-index property to all the parents of your absolute element until you reach the siblings that overlap your absolute element. So, here’s a workaround:
FIX:
#column1 { z-index: 10000; } |
IE7 ignores margin-top following an element with absolute position
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; } |