CODEWITHSUNDEEP
htmlcssinternet-explorer-7
Tower
Tower

Reputation: 102945

Buggy HTML tables in IE7, help?

I have the following code:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .tl, .tr, .bl, .br, .b, .t {
                background: #f00;
                width: 16px;
                height: 16px;
            }

            .m {
                background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
            }

            table {
                width: 512px;
                height: 512px;
                border-spacing: 0px;
                border-collapse: collapse;
                table-layout: fixed;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td class="tl">&nbsp;</td>
                <td class="t">&nbsp;</td>
                <td class="tr">&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td class="m">test</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="bl">&nbsp;</td>
                <td class="b">&nbsp;</td>
                <td class="br">&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

It works fine as long as I don't look at it with IE7. IE7 for some reason does not respect my width and height set to 16px and instead makes all rows and columns to take the average size. Oddly, this works in the Quirks mode though, but now in the standards mode, what's up?

P.S. Is there any other way of accomplishing a similar layout that has 16x16 corners, 16px top and bottom while the middle fits in?

Upvotes: 1

Views: 1300

Answers (4)

Michael Low
Michael Low

Reputation: 24506

Try this:

    <style>
          table  {
            width: 512px;
            border-spacing: 0px;
            border-collapse: collapse;
            table-layout: fixed;
        }
        table .m 
        {
            background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
             height: 512px; 
        }
        .tl, .tr, .bl, .br, .b, .t {
            background: #f00;
            width: 16px;
            height: 16px;

        }


    </style>

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 186103

border-spacing and border-collapse are not supported in IE7 and below. Try using

<table cellspacing="0" cellpadding="0">

Update:

I don't have IE7 nor IE6 here, so this is just a guess: try setting the width and height of .m to auto. If that doesn't work (since that would be too easy, right? :)), you can set the dimensions manually to 480px (512 - 2 * 16)

Upvotes: 1

Sotiris
Sotiris

Reputation: 40096

give height:100%; for .m

Upvotes: 2

Pekka
Pekka

Reputation: 449803

Try giving each cell some content:

<td class="tl">&nbsp;</td>

that should fix it.

Upvotes: 1

Related Questions