carpinteyrourm
New Member
Consider the following HTML markup:\[code\]<ul> <li>Short</li> <li>LOOOOOOOOOOOOOOOOOOONG</li></ul><table> <tr> <td>Short</td> </tr> <tr> <td>LOOOOOOOOOOOOOOOOOOONG</td> </tr></table>\[/code\]Styled with:\[code\]ul { display: table; margin: 0; padding: 0;}li { display: table-row;}td:hover, li:hover { background-color: gainsboro;}\[/code\]What you will get is two similar tables, each with a short and with a long cell. The cells of the first table are anonymous cells as per http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes. When displayed in Firefox or Chrome, the second table behaves equally. When you hover over a table row its background turns grey. Firefox shows the same behaviour with the CSS table that uses the \[code\]ul\[/code\] markup.In Chrome, however, the extent of the first list entry (a table row in the CSS table model) does not include the padding needed to make the short entry as long as the long entry, so when you hover over the padding, nothing turns grey. (The behaviour doesn't even change when you add a second column, the \[code\]<ul>\[/code\] element will shine through the padding so that the extent of the \[code\]<li>\[/code\] element will be two separated boxes.You can play around with it in the following jsfiddle: http://jsfiddle.net/wvg8n/I am wondering whether Firefox or Chrome is right here. I have the strong suspicion that Chrome, or rather the Webkit engine is the one that is buggy.