Clever Geek Handbook

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>
+2


source to share


3 answers


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">
+4


source


All browsers have different default styles. Some make more sense than others. Try using CSS Reset to flatten the playing field, so to speak.



+2


source


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.

+1


source






More articles:


All Articles