Like my last post, "
Though this problem does at times affect IE7, it is a virtually unavoidable "feature" of IE6 for new designers. I say new designers because it does not take many infected design attempts before we inevitably scour the internet for a solution. I know I did. The numerous discussions about Internet Explorer's "hasLayout" property can leave the un-initiated feeling dizzy and disoriented.
The "hasLayout" property is a mystical and magical phenomenon that is extremely difficult to predict or trouble shoot. It is an element built into Internet Explorer that helps decide how elements are rendered and relate. I am including a few links for the students among us who wish to study the matter more fully. For the rest of you, fee free to skip to the solution.
Our Solution
Part 1: IE6-Specific Style Sheet or CSS
The first step is creating an IE6-specific style sheet and linking it to our site (the code below actually applies to every version of IE, 6 and below). This solution will not validate with a css validator so we want to affect as few browsers as possible. We are going to create an "if" statement in the <head> of each page we want to link this fix to. We create our sites using an ASP.Net Master Page, allowing us to link the fix to each page of our site in one place.
<!--[if lte IE 6] >
<link href="./themes/IE6_Styles.css" type="text/css" rel="stylesheet" media="all"/>
<![endif]-->
This style sheet is where you will put all of your styles that will affect your site when viewed in IE6 or older. Make sure that you link any other style sheets above this "if" statement. That way the IE6 style will override your normal style sheet(s) for duplicate classes.
Part 2: A Little Magic of Our Own
I used to try to correct every issue on an individual basis using a combination of "position:relative" and "zoom:1" tags. Unfortunately, that takes a ton of time and energy. One could go crazy...
While trying my best to explain the bug to my business partner one day, he asked, "why not just fix every element on the page at once." Indeed, why not? My brain thought best practices, standards, accessibility... Then I thought, retire your browser people! One of us is getting too old for this, and my IRA says it is not me just yet...
So I gave in and put the following in my IE6-specific style sheet:
body * { zoom:1; }
Amazingly, applying a zoom:1 to every element in the body tag eliminated my peek-a-boo troubles in IE6. However, it also screwed up all of the <ol>'s and <ul>'s royally. I lost my list bullets, the margins and padding were off, and every item in my <ol>'s thought it was "1."
That is when I went really crazy and changed my fix to this:
body * { zoom:1; }
ul, ol, li { zoom:0; }
Viola! I out-grew peek-a-boo and retained my list functionality. I have not spent more than an hour trying to decide whether something hasLayout or not since...
I doubt that w3 would endorse this solution. You may want to do your own studying before adopting any hacks or tricks into your design work flow.