IE7 spacing inside UL
Can someone explain why IE7 insists on putting space between the table and the ul in this example? It doesn't seem to be happening in IE8 or FF.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<ul style="background-color: Blue;">
<li>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: Red">
<tr>
<td>
<img style="display: block" src="http://www.google.com/intl/en_ALL/images/logo.gif"
height="25" border="0" width="150" />
</td>
</tr>
</table>
<ul style="background-color: Green">
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
</body>
</html>
You need to provide a hasLayout in a li containing a table and a ul.
<ul style="background-color: Blue;">
<li style="zoom:1;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: Red">
All browsers have different default styles. Some make more sense than others. Try using CSS Reset to flatten the playing field, so to speak.
I ran into these issues with Internet Explorer earlier and this is the solution: remove spaces between tags </td>
and </tr>
. This is how your html should look like:
</td></tr></table>
The browser creates a TextNode between </td>
and </tr>
, and this is the extra space you see on your page.