Why isn't the table centered in Explorer?

Question

This is a HTML email.

I have 2 tables inside each other. 1 set to 100% and another inside 700px wide.

This is the HTML:

<table width="100%" border="0" align="center" cellspacing="0">
  <tr>
    <td width="700">


    <table width="700" border="0" align="center" cellspacing="0">


      <tr>
        <td colspan="2" align="center"><img src="i/header.jpg" width="700" height="935" alt="10 Good Reasons" /></td>
      </tr>
      <tr>
        <td width="700"><img src="i/reasons.jpg" alt="10 Reasons to celebrate" /></td>

      </tr>

      <tr>
        <td colspan="2"><p class="details">Thursday December 3rd <br />
          The Kings Head, 357 King William Street <br />
          4pm until 8ish.        
          <p class="details"> 
          <img src="i/hr.jpg" />
          <p class="details"><a href="mailto:[email protected]"><img src="i/rsvp.jpg" alt="RSVP" /></a></td>
      </tr>

      <tr>

      <td><p class="unsubscribe"><a href="mailto:[email protected]">Please  RSVP before November 27th.</a>
        <unsubscribe>Click here to unsubscribe.</unsubscribe></p></td>

      </tr>

    </table></td>
  </tr>


</table>

This is the CSS:

/*//////////////ERIC MEYER RESET RELOADED////////////*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}

ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */

caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}


body {
    background-image: url(i/bg.jpg);
    background-repeat: repeat-y;
    background-position: 50% 50%;
    background-color: #888989;
}


img.top {margin-left:auto; margin-right:auto;display:block;}
img.bottom {margin-left:auto; margin-right:auto;display:block;}


p.details {
    color: #666666;
    font: 32px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align: center;
    padding-bottom:5px;
    padding-top:20px;
}

p.unsubscribe a {
    text-decoration: none;
    color: #666666;
}

p a:hover {
    text-decoration:underline;}

p.unsubscribe {
    color: #666666;
    font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align: center;
    padding-bottom:20px;
    padding-top:20px;
    }

table table {margin-left: auto; margin-right: auto;}

a.in-a-browser {
margin-left:auto;
margin-right:auto;
display:block;
width: 1028px;
height: 64px;
background-image:url(i/top.jpg);
text-align:center;
color: #666666;
font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-top:0px;
}


td {text-align:center;}
tr {text-align:center;}
table {text-align:center;}

Any suggestions would be appreciated.

Answer 1

You have made the table cell in the outer table 700px wide, which conflicts with the 100% width of the table. Remove the width on the table cell.

Answer 2

I expect you understand my english.

A element doesn't center itself, for convention, so.. the container (cell) should center the element inside (table):