IE6/Win: jump on hover in Ala's Holy Grail layout

A draft.

This article focuses on a jumping column sometimes visible in the "Holy Grail" layout published in A list apart [Levine] and in similar layouts that use percentage margins.

The Holy Grail layout and the percentage margin bug in IE6

Authors have modified the Holy Grail:

Fig. I shows the #container element with padding. The content edge of the container, its width, is the basis for all percentage calculations. Or better, it should be.

box model of the Holy Grail layout

Fig. II shows the #center and the #left floating columns. The following negative margin shift can be imagined as a pull to the left, starting from the right edge of #center (green arrow).

Negative margin shift by -100% according to the standards and in IE6

IE6 has a bug with percentage margins [Chao]: initially, they are erroneously calculated with respect to the grandparent's width. Here, this is the content edge of body. In IE6, the column is pulled too far (red arrow). Percentages on margins skip one generation in IE6.

Holy Grail's offset fix and the jump on hover

The miscaltulation has to be compensated. The Holy Grail fixes this by an offset back to the right, as shown in Fig. III. Since the -100% percentage margin pulled it to the left, starting from the right edge of the #center column, the compensation has to push it back by a length that equals to the container's right padding.

jump of the shifted right column on hover

But IE6's percentage margin bug has two faces. When the box is redrawn because of a hover event, the margin is now calculated correctly with respect to the parent. To be exact, the percentage margin is calculated with respect to the next but one ancestor (before redraw) respective the next ancestor that has layout (after redraw). The reference of the calculation switches.

This auto-compensation on redraw adds to the static offset compensation fix, resulting in a jump of the column to the right.

A fix with an inner wrapper (haslayout = true)

It became visible that the static offset compensation fix does not work flawlessly, given the parent has layout and a redraw event is triggered.

A fix (replacing the old one) is to duplicate the reference for the percentage calculation. If an inner wrapper is added that has the same width as the #container, and this #innerwrapper contains the container's content (#center, #left, and #right), then the container became grandparent. In Fig. IV, #innerwrappper { zoom: 1; } does this job (using a conditional comment in the head section that serves this fix to IE6). By default at block level, this div will take the available space, the content edge of #container. And zoom: 1 triggers haslayout, therefore, the percentage calculation may switch from #container to #innerwrapper without a difference in result.

layout inner wrapper taking the space of the content edge of the container
  1. * html #left {
  2. left: 150px; /* RC width */
  3. }
  1. <!--[if IE 6]><style>
  2. #innerwrapper { zoom: 1; }
  3. </style><![endif]-->
  1. <div id="container">
  2. <div id="innerwrapper">
  3. <div id="center" class="column"></div>
  4. <div id="left" class="column"></div>
  5. <div id="right" class="column"></div>
  6. </div>
  7. </div>

Don't touch the original final push (#left { ... right: 200px; /*or 240px for the padded version*/} in the Ala article), because it is needed in IE6 now like in the other browsers "to push the left column the rest of the way over" (see Fig. V).

push to the final position

Column moving when window narrowed

Note that neither this fix or the old one are compensating for the problem that the columns start to move when the window is narrowed. This is the case when elements are wider than the narrowed column and expand the box in IE6. A css-d thread [Gillenwater, Sørtun et al.] discussed this problem.

References

Matthew Levine:
In Search of the Holy Grail. A List apart (2006), No. 211
Holly Bergevin et al.:
On having layout — the concept of hasLayout in IE/Win
Ingo Chao:
Quirky Percentages in IE6's Visual Formatting Model
Zoe Gillenwater, Georg Sørtun et al.:
negative margined sidebar moving when window narrowed in IE
Created, and last updated:
Mar 12, 2007
Author:
Ingo Chao