Jens Peter Bregnballe wrote:
> Perhaps someone can give me advice on how to avoid the hopping of my right
> column div id="hoejreklumme" in IE 6. It is a layout which is fully
> flexible, and I would like to keep it that way.
> The xhtml is at : http://www.bregnballe.suite.dk/
> The css is at: http://www.bregnballe.suite.dk/css/bregnballe.css
The quirky percentages bug, to put it short, does calculate a percentage
margin of an element in relation to its grandparent, which is of course
wrong. But when there is a hover event within this parent, IE rethinks
and decides to correct the miscalculation: now the %-margin is
calculated with respect to its parent, which is correct.
If the parent has a different width as the grandparent, this will result
in a jump-on-hover to the correct position; the computed value is now
smaller.
You have two options to fix it:
1 - avoid using %-margins in IE:
#hoejreklumme { /* margin-left: 3%; */ ... }
2 - alternatively, make sure that the parent of this element has the
same width as its grandparent.
Since body
body { margin: 0% 3% 3%; padding: 0px; ...}
is 'smaller' than html, you could add an inner wrapper of body
<body id="velkommen">
<div id="quirkypercentagefix">
...
<div id="hoejreklumme"> ... </div>
...
</div>
</body>
By adding this inner wrapper, the percentage margin of #hoejreklumme
will relate initially to body, and to #quirkypercentagefix after a hover
event is processed.
With
#quirkypercentagefix {width: 100%;}
in addition, you force this element to have layout, that's important for
the %-calculation. {zoom:1} would do it, too. Because both the body and
#quirkypercentagefix are of same width now, nothing will jump.
Hopefully.
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
