HTML - IE10 does not display table correctly?

Question

Here is my html:

      <table id='first' width="800" border="0" cellpadding="0"> <!-- first table -->
        <tr>
          <td width="323">
                  <img src="../imageOne.jpg" width="323" height="179" alt="" />
          </td>

          <td width="257">
              <table id='second'> <!-- table inside table -->
                  <tr>
                      <td><img src="../imageTwo.jpg" alt="CSS logo" width="190" height="100" /></td>
                  </tr>
                  <tr>
                     <td><br /><img src="../imageThree.jpg" alt="ESA logo" width="190" height="95" /></td>
                  </tr>
              </table> <!-- end second table. This second table had two rows / two images, one on top of another. -->
         </td>
          <td width="212"><img src="../imageFour.jpg" width="203" height="251" alt="photo of an extension cord plugged in" /></td>
    </tr>
  </table>

This isn't actually my html, I'm at work and have to edit someone elses. As you can see, there is a table inside a table. In IE8, the second table is inside the first table, but for some reason in IE10, the second table is a bit below the first table. It's as if the second table has a

margin-top: 20px;

but I made sure that the table has no margin-top. Any idea why the second table is not inline / completely inside the first table? Note: This webpage is on an intranet site.

Edit: I was thinking, if I can find a way to vertically align the table inside the first table, maybe that will fix the problem? Is there a way to vertically align a table inside another table?

I am not sure what your question is. Are you asking why both the images in second table one below the other ? — Ani, Jan 06 '14 at 18:31
@ChrisHardie yes it is an intranet site. Is that what is causing the problem? — user2817200, Jan 06 '14 at 18:33
@Ani i'm asking why the second table is not in line with the first, it is appearing half way below the first table. — user2817200, Jan 06 '14 at 18:34

score 2 · Accepted Answer · edited May 23 '17 at 12:00

You are almost certainly having an issue with Compatibility Mode:

Click Tools -> Compatibilily View Settings

Untick "Display Intranet sites in Compatibility View"

For reasons beyond my imagination, Microsoft believes that by default Intranet sites should be rendered in "Compatibility View" mode, which basically means an earlier version of IE's rendering engine (I believe it goes all the way back to IE7).

http://windows.microsoft.com/en-CA/internet-explorer/use-compatibility-view#ie=ie-11

You might also want to look at this meta tag and the header you need to set in your web.config, as detailed in this SO post:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode

HTML - IE10 does not display table correctly?

1 Answers1