title: Add a subscript in the bottom right corner of a table cell
body: <p>I am trying to add a sub script to an html table cell so that it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/BaMfl.png" alt="enter image description here"></p>
  
  <p>(The 5 centred in the cell and the 99 at the bottom right corner)</p>
  
  <p>Here is some sample html:</p>
  
  <pre><code>&lt;table class="yearTable"&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td class="dayCell"&gt;5
              &lt;div class="daySubscript"&gt;99&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and the CSS I am using:</p>
  
  <pre><code>.yearTable td{
      border:1px solid #CCCCCC;
      width:45px;
      height:45px;
      text-align:center;
      vertical-align:middle;
  }
  
  .dayCell 
  {
      color:Black;
      background-color:Aqua;
      position: relative;
  }
  
  .daySubscript {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;  
        z-index: 10;
      text-align:right;
      vertical-align:bottom;
  }
  </code></pre>
  
  <p>The problem is that the subscript shows in the top right corner in IE8 and doesn't show at all in firefox</p>
  
  <p>Sample output in IE:</p>
  
  <p><img src="https://i.stack.imgur.com/3Lw5A.png" alt="enter image description here"></p>
  
  <p>I tried moving the test in cell into a separate div and I could overlay them but not offset them.</p>