CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-7
Jeremy
Jeremy

Reputation: 9283

IE7 spacing within a UL

Can someone please explain why IE7 insists on putting a space between the table and the ul in this example? It doesn't seem to happen 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>

Upvotes: 2

Views: 1769

Answers (3)

Emily
Emily

Reputation: 10088

You need to give hasLayout to the li containing the table and ul.

  <ul style="background-color: Blue;">
    <li style="zoom:1;">
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: Red">

Upvotes: 4

Rodrigo
Rodrigo

Reputation: 4395

I've fought this problems with Internet explorer before, and this is the solution: remove the spaces between </td> and </tr> tags. This is how your html should be:

</td></tr></table>

The browser create a TextNode between </td> and </tr> and this is the additional space you see in your page.

Upvotes: 1

geowa4
geowa4

Reputation: 41813

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

Upvotes: 2

Related Questions