Paul Roberts wrote:
> ...if you reload this page a few times in IE, every say 1 in 5 or 10 goes
> the margin on some paragraphs will jump left a few pixels.
Paul, I can't reproduce this on my system (must be the caching), but
compared with compliant browsers like FF/Opera, IE shows some problems
percentages on lengths, while page rendering, are calculated in relation
to the dimensioned ancestor element (at least the viewport), not in
relation to the parent.
So, your 5% padding-left in #content, related to the body, is not equal
to the 5% related to the parents width of 780px as the specs would say,
(assuming your viewport isn't sized to 780px too).
body#home -- width=viewport
div#bodycontent -- width: 780px
div#content -- padding-left:5%
You might have some fun by applying a link
<a href="#">just hover</a>
somewhere in the #content, let's say after the second paragraph.
we force a hover-transition, a reflow.
See how IE6 states it can calculate percentages! The link and the last!
line of the paragraph are performing the real 5% (compared to FF).
(your #nav is jumping due to its margin-top:1% too.)
A workaround (not a fix) is to double-wrap the suspicious element with
the percentage lengths:
Give width:780px not only to #bodycontent (parent), but to body#home too
(ancestor), and feed it only to IE6 via appropriate hacking.
A more general workaround: forget percentages on IE6. And let's hope
Excel is more exact.
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/