Links in <ul> styled with display: block do not trigger :hover when hovering the mouse cursor over their non-text part if they are at the same vertical position as text in a next sibling.

When hovering the mouse over the non-text part of links with display: block, the :hover class is not triggered if the next sibling is positioned at the same height. E.g.: The first 3 list items will not trigger the :hover class when hovering the mouse over their non-text part while the last ones (link #4, link #5, link #6, link #7: which ones will actually depend on how tall this #sideSection block is) will.

Note: try with resizing the viewport, in particular when reducing the browser viewport width.

This sort of bug happens often in CSS columnar webpage templates and is one reason why amateur web authors resort to display: table-cell, bizarre hacks, ugly and non-forward-compatible hacks or/and even table-based layout design. Firefox 2.x, Opera 9.x, Safari 2, Safari 3.0.3, Konqueror 3.5.x, NS 6.2, NS 7.0, NS 7.1, NS 7.2, Hv3 TKHTML alpha 16, Seamonkey 1.x, Seamonkey 2.x, K-meleon 1.1.2, Epiphany 2.x, Galeon 2.x all pass this test.

This bug has been reported at Connect's IE beta feedback as bug 332625.

Update: This bug has been FIXED in Internet Explorer 8 beta 2 (build 6001.18241) released on August 28th 2008. Otherwise, Internet Explorer 8 beta 2 PASSES this specific and particular testcase.

Valid HTML 4.01! CSS compliant