CSS zoom and div alignment inside a table cell

Question

I have the following content:

It is a table, with one row and three cells, two blue cells, and the middle cell, and in the middle cell I have a div, for now it looks good.

But if I put the zoom property in the div (zoom: 0.8) I get an extra space in IE11, as if the div was still the same size, like this:

In chrome, the table just adjusts to the div size, but not in IE, is there anyway I can achieve this?

This is the fiddle of the example:

http://jsfiddle.net/Z3wbN/3/

HTML:

<table class="container">
<tr>
    <td class="border">
    </td>
    <td>
        <div class="content">
            This is a test
        </div>
    </td>
    <td class="border">
    </td>
</tr>

CSS:

.container {
    background-color: #ddd;
}

.border {
    background-color: blue;
    width:10px;
}

.content {
    margin: auto;
    width: 500px;
    border: 2px solid yellow;
    zoom: 0.8;
}

Answer 1

All you need to do is to apply zoom to .container too :

.container {
    zoom: 0.8
}

Here's the JSFiddle: http://jsfiddle.net/Z3wbN/12/

Answer 2

One possible solution, although I don't know if you'll like it, could be this one: http://jsfiddle.net/Z3wbN/14/

On that solution:

• A couple of classes/ids are added to the tags;
• The width is assigned to the middle cell instead of to the div inside that cell;
• if it's an IE browser, the div width is adjusted to 125% (100% / 0.8 that is the zoom).

The way of detecting the browser is JavaScript but you could try any that you want (I got it from Detect IE version (prior to v9) in JavaScript):

// if it's an IE browser then update the class to "container ie"
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
   document.getElementById("container").className = "container ie";
}

Then the CSS is adjusted as specified in the list above:

td.middle {
    width:500px;
}

.content {
    margin: auto;
    border: 2px solid yellow;
    zoom: 0.8;
}

.ie .content {
    width:125%;
}

This solution displays a "similar" result on IE and Chrome/Firefox.

Answer 3

You need to use display:table-cell; to class .content

Here is the updated fiddle:

.container {
  background-color: #ddd;
}

.border {
  background-color: blue;
  width: 10px;
}

.content {
  margin: auto;
  width: 500px;
  border: 2px solid yellow;
  zoom: 0.8;
  display: table-cell;
}

zoom: 0.5;

<table class="container">
  <tr>
    <td class="border">
    </td>
    <td align="center">
      <div class="content">
        This is a test
      </div>
    </td>
    <td class="border">
    </td>
  </tr>
</table>