CODEWITHSUNDEEP
htmlcssinternet-explorerposition
busbina
busbina

Reputation: 579

IE absolute table position leaves whitespace

I'm currently fighting with IE. Before I get some rants about tables I know "dont use them", but I didn't write this, I'm just debugging it. I'd like to know if there is some hack to get the table spacing out of the flow on IE, when I absolute position a table. I included some style to help see the issue better. There is a bar of white space that doesn't belong to anything. This works great on FF and Chrome, IE just breaks the flow on this.

<html>
    <head>
        <style type="text/css">
            .button{
                float:left;
                Background:#0F0;
            }

            #testCont{
                Background:#F00;
            }

            #testUnder{
                Clear:both;
                Background:#00F;
                Color:#FFF;
            }

            .tablePop{
                position: absolute;
                top:60px;
                left:60px;
                Background:#CACACA;
            }
        </style>
    </head>
    <body>
        <div  id="testCont">
            <div class="button">
                Button1
            </div>
            <div class="button">
                Button2
            </div>
            <div class="button">
                Button3
            </div>
            <table border=0 cellspacing=0 cellpadding=0 class="tablePop">
                <tbody>
                    <tr>
                        <td>
                            Row 1
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Row 2
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Row 3
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div  id="testUnder">
            Hello World
        </div>
    </body>
</html>

Upvotes: 1

Views: 408

Answers (1)

Sampson
Sampson

Reputation: 268354

Put your page in standards mode:

<!DOCTYPE html>
<html>
    <head>

You can test this out quickly by pressing F12 and switching the document mode to standards.

Alternatively, you could also use display:inline instead of float:left for .button.

Upvotes: 3

Related Questions