Home/ Questions/Q 3976574
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T04:49:15+00:00

This is the code: it works well in Firefox and Opera, however it does

  • 0

This is the code:

it works well in Firefox and Opera, however it does not in IE:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
                body {
                    border: 1px solid gray;
                    line-height: 120%;
                    margin: 5px;
                    width:100%;
                }
                
                h1#header,h5#footer {
                    background-color: gray;
                    clear: both;
                    color: white;
                    padding: 0.5em;
                    margin: 0;
                }
                
                div#menu {
                    width: 190px;
                    float: left;
                }
                
                div#body {
                    margin-left: 200px;
                    padding: 2px;
                    border-left: 2px gray solid;
                }
                
                table {
                    border: 1px solid #CEDCED;
                    border-collapse: collapse;
                    margin: 2px auto;
                    width: 100%;
                }
                
                th {
                    border: 2px ridge maroon;
                    background-color: maroon;
                    color: white;
                    padding: 2px;
                }
                
                tr {
                    background-color: white;
                    margin: 1px;
                }
        </style>
        <script type="text/javascript">
                function setTableWidth(){
                    alert(document.getElementById('tab').offsetWidth);
                }
        </script>
    </head>
    
    <body onload=setTableWidth()>

        <h1 id="header">Header</h1>

        <div id="menu">
            <ul>
                    <li>link1</li>
                    <li>link2</li>
                    <li>link3</li>
                    <li>link4</li>
                    <li>link5</li>
            </ul>
        </div>
            
        <div id="body">
            <table id="tab">
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>email</th>
                </tr>
        
                <tr>
                    <td>test</td>
                    <td>100</td>
                    <td>xx</td>
                </tr>
            </table>
        </div>

        <!-- foot -->
        <h5 id="footer">Copyright xxx</h5>
    </body>
</html>

I have add a js to see the width of the table,if you test it in the browser,you will get the size,the following is mine:

Firefox:1062

IE:1521.

So,I wonder why?

In my opinion,the result of Firefox is normal, why the table take more than the width of its parent (the div#body in the example)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe that it actually works properly in IE.

    Your table is going to get the width of the container which is the body. It then gets ‘pushed’ over to the right by your menu since you moved it over to the left by 190px. This will make your total width 100% + 190px.

    I would drop the margin-left on your div#body and just float it to the left. Also you should stick with either fixed values or percentages. Set the left column to 10% and the right column to 90% for example, and float them both to the left.

    • 0