Home/ Questions/Q 7545033
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T08:49:32+00:00

I have a simple fixed width table. The first column has a fluid width

  • 0

I have a simple fixed width table. The first column has a fluid width and contains some simple text. The other columns are fixed width, and contain a padded div with some more simple text in them. All elements of the table are set to vertical-align: middle. Everything vertically aligns fine in IE7+, FF, Chrome, etc.

Then I’ve added some JS to toggle the display of the fixed width columns. Everything remains vertically aligned in FF, Chrome, even IE7, but for some reason IE8 goes screwy.

Here’s an demo: http://www.pinksy.co.uk/table.html

To demonstrate:

  1. Toggle column 4. Column 5 will then be vertically aligned as if it was still the old row height.
  2. Toggle column 3. Column 4 and 5 will then be vertically aligned as if it was still the old row height.
  3. Toggle column 2. Column 3, 4, and 5 will then be vertically aligned as if it was still the old row height.

So, it’s something to do with IE8 not being able to recalculate the vertical alignment of the remaining right-most columns with respect to the new row height.

The crazy thing is, it’s fine in IE7! Any ideas greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    My IE8 was running on Compatibility View mode. I could replicate your issue when I switched to normal mode. I added a nested table for the numbers and that fixed it…

    <td class="title">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra risus. Quisque sodales libero eget diam tincidunt interdum sollicitudin nunc porttitor. Donec bibendum ultrices purus sit amet viverra. Sed in libero quis tellus vehicula mattis sit amet vitae turpis.
</td>
<td>
    <table>
    <tr>
        <td class="num1">
            <div class="val">Num1</div>
        </td>
        <td class="num2">
            <div class="val">Num2</div>
        </td>
        <td class="num3">
            <div class="val">Num3</div>
        </td>
        <td class="num4">
            <div class="val">Num4</div>
        </td>
        <td class="num5">
            <div class="val">Num5</div>
        </td>                           
    </tr>
    </table>
</td>
    • 0