A series of <a>s (one...nine) with display:block, hasLayout, margin-bottom, hover with background-color change (could be marked up using lists with the same problems, here used just divs for simplicity.)

The hover on <a> number N makes the margin-bottom number N-2 to disappear if present (this is the space between <a>s #N-2 and #N-1), and makes the margin-bottom number N-1 to reappear if not present (this is the space between <a>s #N-1 and #N). This creates a jumping effect when the mouse is moved vertically down and up on the anchors.

The cases after the first do not have the problem (see below). The problema has been fixed in IE7 (but not so other similar problems, see IE7-/Win: disappearing UL bottom margin on hover.)

  1. case 1 has blanks between <a>s
  2. case 2 ha blanks inside the <a>s as well (after the content)
  3. case 3 has NO blanks, neither between, nor inside the <a>s
  4. case 4 has NO Layout on all <a>s, this would make them not sensitive (to click and hover) on the whole block (only on the text), but this can be fixed giving hasLayout just to the first <a> (which does not cause any margin jump)
  5. case 5 has margin-top instead of margin-bottom

case 1

one two two two two three four four four four four five five five five five six seven eight nine

case 2

one two two two two three four four four four four five five five five five six seven eight nine

case 3

onetwo two two twothreefour four four four fourfive five five five fivesixseveneightnine

case 4

one two two two two three four four four four four five five five five five six seven eight nine

case 5

one two two two two three four four four four four five five five five five six seven eight nine

CSS tests home