[css-d] border-left and padding-bottom on a block without layout clip the subsequent elements within the same containing block [was: IE6 a:hover problem in table]

reset

block

|||a:hover|||

block

|||a:hover|||

block

|||a:hover|||

block

|||a:hover|||

block

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat. Maecenas sollicitudin.

|||a:hover|||


<div class="container">
     <p>block</p>
</div>
<a href="#">|||a:hover|||</a>

The reflow on |||a:hover||| and the consequential jump indicate the clip of the box before the transition occurs. This is due to the preceding pink container (a block-level element within) with padding-bottom and border-left set.

Unlike other situations, the reflow on a:hover within the same layouted containing block (silver-dotted) does not fix this completely.

There is no floating involved.

If the following element at block-level has layout, its width is not calculated correctly (dashed border example: width:100%;). This may cause dropping floats on a:hover-transitions.

The Holly hack fixes this dimensional bug (and border-bottom: 1px solid 'transparent'; or omitting the padding-bottom would be a workaround without having layout).

But when a separating border or padding prevent this bug, isn't this a case of collapsing (spurious) margins?

Feb 8, 2005 | Ingo Chao