Add a subscript in the bottom right corner of a table cell

Question

I am trying to add a sub script to an html table cell so that it looks like this:

(The 5 centred in the cell and the 99 at the bottom right corner)

Here is some sample html:

<table class="yearTable">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td class="dayCell">5
            <div class="daySubscript">99</div>
        </td>
    </tr>
</table>

and the CSS I am using:

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

The problem is that the subscript shows in the top right corner in IE8 and doesn't show at all in firefox

Sample output in IE:

I tried moving the test in cell into a separate div and I could overlay them but not offset them.

Answer 1

Try positioning your element bottom right,

To see this work : http://jsfiddle.net/bfSVk/

.daySubscript {
    /* width: 100%; */
    /* height: 100%; */
    position: absolute;
    bottom:0; /* top: 0; */
    right:0; /* left: 0; */
    z-index: 10;
    text-align:right;
    vertical-align:bottom;
}

.yearTable td{
    border:1px solid #CCCCCC;
    width:45px;
    height:45px;
    text-align:center;
    vertical-align:middle;
    position:relative; /* establish relationship with children position absolute */
}

.yearTable {
    position:relative;
    /* establish relationship with children-children position absolute */
}