CODEWITHSUNDEEP
htmlinternet-explorer-8css
Anna
Anna

Reputation: 548

Table width in IE

enter image description hereThis might be a simple question, but I'm having trouble with it: In my web page, I have the following:

<head>
   <!-- Stuff here -->
</head>

<body>
   <header>
      <div class="content-wrapper">
          <!-- More stuff here... -->
      </div>
   </header>
</body>

where content-wrapper is in a css file and defines max-width: 960px. The problem I'm having is that the max-width has no effect in IE8. In the body, I have a table that I thought should be limited by the width defined in the content-wrapper, but in IE8 it just ignores it (but it works in Firefox).

I tried a couple of different things, with no success:

None of those worked in IE! Any ideas? What am I missing?

New info:

I put my table inside a div tag like this:

<div style="border: 1px solid; width: 960px">
   <!-- Table comes here -->
</div>

As you see in the attached image, the div is being properly changed to have a border and the specified width, but the table just ignores it in IE8. In Firefox it works fine.

Upvotes: 1

Views: 537

Answers (3)

Ali &#199;arık&#231;ıoğlu
Ali &#199;arık&#231;ıoğlu

Reputation: 1305

width: 90% ... it works in all browsers... I tested it and show the test result below.

HERE IS A DEMO

enter image description here

.content-wrapper
{ 
    width: 90%;
    height: 190px;
    background: red;
    margin: auto;
}

Upvotes: 1

Kshirodra Meher
Kshirodra Meher

Reputation: 228

<html>
   <header>
        <style>
            .content-wrapper {
               width:450px;
               background-color: red;
               height: 250px;
            }
           .content-wrapper table {
              width: 100%;
           }
       </style>
    </header>
    <body>
      <div class="content-wrapper">
          <table>
            <tr>
                <td>
                    Column 11
                </td>
                <td>
                    Column 12
                </td>
                <td>
                    Column 13
                </td>
            </tr>
            <tr>
                <td>
                    Column 21
                </td>
                <td>
                    Column 22
                </td>
                <td>
                    Column 23
                </td>
            </tr>
          </table>
      </div>
    </body>
</html>

Move the css to your css file. I think this will work

Upvotes: 0

Lost Left Stack
Lost Left Stack

Reputation: 1952

content-wrapper's container has to have a width along with the max-width in IE8 for it to recognize it.

Take a look at this article concerning IE8 and max-width: http://www.zeilenwechsel.de/it/articles/5/How-max-width-fails-in-IE8.html

Upvotes: 1

Related Questions