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

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

i trying add together sub script html table cell looks this:

(the 5 centred in cell , 99 @ bottom right corner)

here 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 css 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 subscript shows in top right corner in ie8 , doesn't show @ in firefox

sample output in ie:

i tried moving test in cell separate div , overlay them not offset them.

try positioning element bottom right,

to see 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; /* found relationship children position absolute */ } .yeartable { position:relative; /* found relationship children-children position absolute */ }

html css html-table