[ciapug] css help

[Barry Von Ahsen]

I'm trying to move to a css layout and I'm replacing the following:

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="middle">
<td width="3%">
<img src="/images/titlebar_endcap_L.gif" width="16" height="28">
</td>
<td width="94%" height="28" valign="middle" bgcolor="#1A4A90" 
class="pageheader13w">TEXT</td>
<td width="3%" height="28" valign="middle">
<img src="/images/titlebar_endcap_R.gif" width="16" height="28">
</td>
</tr>
</table>

this creates a colored bar with curved caps at the end. thusfar I have:

<style>
.headerbarL { display: inline; padding: 2px 0 2px 10px;
   background: #E4DBBA url(/images/titlebar_endcap_L.gif) top left 
no-repeat; }
.headerbarR { display: inline; padding: 2px 0 2px 10px;
   background: #E4DBBA url(/images/titlebar_endcap_R.gif) top right 
no-repeat; }
.headertext { width:560px; background: #1a4a90; font-family: Arial, 
Helvetica, sans-serif; font-size: 13px; color: #ffffff; text-decoration: 
none ; font-weight: bold }
</style>
<span class="headerbarL">&nbsp;</span>
<span class="headertext">TEXT</span>
<span class="headerbarR">&nbsp;</span>

It works great except: 1) the headertext isn't the full height of the L 
and R, and 2) I can't make it go to 100% (the width will be determined 
by the parent)

Any help for a css n00b? (This will be for IE5.5+, but the more 
cross-browser the better)

-barry