CODEWITHSUNDEEP
cssinternet-explorer
purinkle
purinkle

Reputation: 917

Table is forcing width of div in IE

We have a page similar to the following:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type"
          content="text/html;charset=ISO-8859-1" />
        <title>Welcome to Application</title>
        <style type="text/css">
html, body, div, table, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

html {
    font-size: 100%;
}

body {
    background: #fff;
    color: #036;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    line-height: 18px;
}

* html body {
    text-align: center;
}

.container {
    display: block;
    margin: 18px auto 0;
    width: 750px;
}

* html .container {
    height: 1%;
    text-align: left;
}

.container:after {
    clear: both;
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.section {
    border-color: #e5e5e5 #dbdbdb #d2d2d2;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 18px;
    padding: 17px 39px;
}

table, th, td {
    vertical-align: middle;
}

th, td {
    border-right: 1px solid #fff;
    font-weight: 400;
    padding: 9px;
    text-align: left;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1.4em;
    width: 100%;
}

th {
    background: #c3d9ff;
    border-bottom:1px solid #ddd;
    font-size: smaller;
    font-weight: 700;
}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="section">
                <table cellspacing="0">
                    <tr>
                        <th>Header</th>
                        <th>Header</th>
                        <th>Header</th>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>1</td>
                        <td>a</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>2</td>
                        <td>b</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>3</td>
                        <td>c</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>4</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>5</td>
                        <td>e</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>6</td>
                        <td>f</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

The div displays correctly in Chrome and Firefox 3.6 on Windows XP, but, when viewed in IE6, the table is forcing the div to be wider than the specified 750 pixels.

This issue has now been partially resolved by explicitly setting the width of the table to 670 pixels

We'd still prefer a resolution where the width of the table doesn't need to be explicitly defined

Upvotes: 0

Views: 827

Answers (1)

Max Starkenburg
Max Starkenburg

Reputation: 98

I don't have IE6 on my computer, though I tried the simulator at http://ipinfo.info/netrenderer/ and one thing that seemed to work (short of explicitly setting a 670px width on .container or table) was to add the following:

* html .section{
    width: 100%;
}

I'm guessing that tells IE6 that table's setting of width: 100%; should be based on .section's computed width (which is affected by its padding and border) instead of .container's width of 750px.

Upvotes: 1

Related Questions