When utilizing IE7 standards mode within IE9, empty table cells are automatically assigned a height of 1px. As a result, elements positioned beneath the table appear lower on the page than intended. To view an example of this issue, refer to the code provided in the following JSFiddle link: http://jsfiddle.net/Zr7T2/3/
Is there a method to adjust the height of empty table cells to 0px in IE7 standards mode?
I am seeking a solution using HTML/CSS only, without resorting to JavaScript. Simply eliminating the empty cells is not a viable option. Thank you!
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE7 Empty Cell Bug?</title>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr><td /></tr>
<tr><td /></tr>
<tr><td /></tr>
<tr><td /></tr>
<tr><td /></tr>
<tr><td /></tr>
// Additional table rows and cells here
</tbody>
</table>
This content should be positioned at the top of the page, yet it appears differently when viewed in IE9 with IE7 standards mode enabled.
</body>
</html>