Please, help me vertically fit text into an inner DIV

[pamelafluente]

Hello experts,

I need some help to do in a proper way what I am doing. I have some
"cells" in a web page. Each "cell" is made of 2 DIV. One is inside the
other.
Example with 2 "cells" :

<div class=c7bg style="top:202p x;left:585px;wi dth:55px;height :30px;">
<div class=c7fg style="top:7px; left:2px;">
<table><tr>
<td width=49px height=14px valign=middle>S HIPVIA</td>
</tr>
</table>
</div>
</div>
<div class=c6bg style="top:202p x;left:643px;wi dth:80px;height :30px;">
<div class=c6fg style="top:7px; left:2px;">
<table><tr>
<td width=74px height=14px valign=middle>E MPLOYEEID</td>
</tr>
</table>
</div>
</div>
where these are the styles

<style type="text/css" media="screen">

..c6bg{position :absolute;backg round:#B8860B;b order-width:1px;borde r-style:outset;}
..c6fg{position :absolute;borde r-width:0;color:# FFFFFF;backgrou nd:transparent; text-align:center;fo nt-family:Tahoma;f ont-size:11px;font-weight:bold;}
..c7bg{position :absolute;backg round:#DAA520;b order-width:1px;borde r-style:outset;}
..c7fg{position :absolute;borde r-width:0;color:# FFFFFF;backgrou nd:transparent; text-align:center;fo nt-family:Tahoma;f ont-size:11px;font-weight:bold;}

</style>

The outer DIV represents the "background " of the cell, while the
inner (with background:tran sparent) represents
the "foreground ".
The foreground needs to be sometimes vertically centered
(valign=middle) . Some other times it needs to be Top or Bottom. I did
that using a <TABLE>.

** Question ***

I feel I am not doing this right. In particular I would like to get
rid of that ridiculous table thingy

<table><tr>
<td ... valign=middle>t ext</td>
</tr>
</table>

and still to be able to vertically center/top/bottom the text.

How can transform this poor code in some nice CSS? I need actual code
suggestions which work with Firefox and IE, at least. Thanks

If you see other things that are wrong please do advise.

-P