The Technology Aces blog is a consolidation of the personal blog posts from the individuals that help make Technology Aces the truly elite IT professionals our clients have come to recognize and depend upon.
For more information about the individual authors please follow the links to their blog. Links can be found in the post details section of each post or in the sidebar navigation located on the left side of this page.
Fixed Positions in IE6
Written By
Mark / November 5 9:06 am
okay, so your happy coding in css compliant world and then you remember … IE is not css compliant … but you’ve just written some code utilizing the "position: fixed;" property and value … you check IE 7 … all good … then IE 6 … rut roh raggy … enter conditional comments … yea it’s a wee bit hacky … but sometimes non compliant browsers require non compliant solutions … the trick here is the use of conditional comments to target the browser then use IE specific css properties and values like overflow-y (however css3 includes this property) and expression along with the so important !important declaration …
for example:
1: <!--[if lt IE 7]>
2: <style type="text/css">
3: body {
4: overflow: hidden;
5: }
6: #YOUR_MAIN_BODY_BLOCK_TAG {
7: height: expression(document.body.clientHeight + "px") !important;
8: overflow-y: scroll;
9: overflow-x: auto;
10: }
11: #YOUR_FIXED_BLOCK_TAG {
12: position: absolute !important;
13: }
14: </style>
15: <![endif]-->
also, ensure that #YOUR_FIXED_BLOCK_TAG is not a child tag of #YOUR_MAIN_BODY_BLOCK_TAG … they should be siblings …