Sent by Big John on 16 November 2003 22:10
Gerry Porter wrote:
> Here's what happens: a three-column fixed-width layout with left, center and
> right divs; the widths of the three divs adds up to the containing div. The
> last six characters of the right div are duplicated and leak out into the
> containing div.
http://schooner.ce.mun.ca:8080/bugtest/bugtest1.html
> The first (ugly) fix I found was to make sure there were at least six pixels
> of extra space between the center and right divs, so that the three divs
> added up to the container minus 6.
That is a significant number.
> The second fix was to insert a blank div that clears right after
> the center div. I threw this in in an act of desperation as I'd
> found a similar fix for a nasty IE5 Mac float problem in the same
> project.
I still don't inderstand why that works.
> Supplementary weirdness: There are two comments in the HTML after the
> center div. Deleting one of the comments removes two of the six
> characters. Deleting the second removes another two.
Those comments do indeed trigger the bug. Any html comments that
come between floated elements that fill a container will do it.
It takes two comments to make to characters repeat, and each
additional comment adds two more repeated characters.
This also happens with only two floats, but one float won't, because
the triggering comments must fall between two floats to cause the bug.
> It doesn't appear to be the Three Pixel Jog, or the Peekaboo (sounds like
> the programme at a dance contest...) Has anyone seen this before?
Ah but it IS the 3px jog! (heh heh) Your floats are both left and
right. I tried it with only left or right floats, and in that case
just 3px of spare width in the container cures the bug. Further,
applying the -3px margin fix mentioned on the 3px jog demo also
fixes it! With opposite floats, the -3px margin must be applied
on the two directly opposing floats, and on the sides that face
eachother, or 6px neg margining in all.
So it seems that not allowing room for those "ghost margins" and
having some comments in the inter-float whitespace causes duplicated
characters to be dumped after the last float of the group.
This 3px bug seems to keep spreading, like a hideous space fungus.
We may have to use nuclear force!
Big John
PS--Don't do the "Peekaboo" in public...
=====
Perennial student + Impractical joker + CSS junkie = Big John
<http://www.positioniseverything.net>
A Master of Rocks, a Pedalin' Fool and a Topophiliac to boot!
<http://kingmanaz.net/~bigjohn/>
__________________________________
Do you Yahoo!?
Protect your identity with Yahoo! Mail AddressGuard
http://antispam.yahoo.com/whatsnewfree
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/