Maziak, Peter (Tek Systems) wrote:
> Why do the anchor's borders on this page get clipped in IE6 (fine in
> FF) and how can I prevent this?
It's the old 'layering' bug in IE/win. Often mixed up with the
'hasLayout' bug, but 'layering' and 'Layout' isn't the same thing.
Those two bugs just happens to strike "in pairs" quite often in IE's
rendering engine, which may make it a bit confusing.
A quick test by wrapping the whole thing in a div with a
background-color, and with or without a 1px padding, reveals that
'collapsing margins' is part of IE's problem.
The first and last case is caused by IE getting the layering wrong when
the default margins on those paragraphs overshoot the invisible box
without a padding, while it's ok when those margins are forced back
inside the invisible box by the padding.
The anchor inside the table would need a similar prevention of
'collapsing margins' - inside the 'table td' itself.
IE6 gets it all wrong with regards to the CSS specs, but the effect of
the 'collapsing margins' on the case is clearly visible and pretty
identical in all browsers. It's just the default-size of those
paragraph-margins that may vary from browser to browser.
Anyway, Ingo has already "killed" the IE-bug by adding 'position:
relative' to the anchor. This affects the 'layering' in IE6 so the
overshooting (not really clipped) part of the anchor becomes visible on
top of the 'collapsed margins'. Then we can forget about those
'collapsing margins' with regard to the original case.
CSS sure is fun :-)
(note to self: local 06/test_1800}
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/