CSS zoom and div alignment inside a table cell

Question

I have the following content:

enter image description here

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:

enter image description here

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;
}

you placed `zoom` wrong. Your zoom rule have to be in the container. — , Jul 08 '14 at 15:31
Why does the zoom have to be in the container? The question places the zoom on the div and not on the table, and the results are not the same if the zoom is in .container or .content — Alvaro Montoro, Jul 08 '14 at 15:41
Yes, @Monty82 is right, I need the zoom on the div, not the container — Escobar5, Jul 08 '14 at 15:48

score 0 · Answer 1 · edited May 23 '17 at 10:32

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.

score 0 · Answer 2 · answered Apr 09 '19 at 12:13

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>

score -1 · Answer 3 · answered Jul 08 '14 at 15:12

-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/

answered Jul 08 '14 at 15:12

Kirill Chatrov

822
6
11

well.. as a matter of fact this just shrinks the whole block to the 80% of its original size, leaving the problem untouched... so I don't think this is a solution.. – Luke Oct 22 '14 at 12:29

CSS zoom and div alignment inside a table cell

3 Answers3