I am modifying a skin for the CKEdit component so that the toolbar is hidden unless clicked. To do so, I moved the toolbar collapser to the row below it using position: relative and top:18px.

My goal is to have the parent tr of the anchor element a height of 2px, but keep the anchor at 11px. Is this possible? I cannot alter the DOM, just the styles.

Here's my reduced code

<style type="text/css">
    table { width: 80px;}
    td { border: solid 1px #ccc; }
    .header  
    {
        background-color: #99f;
        /* This is being ignored */
        height:2px; 
        }
    .below 
    {
        float: right; 
        position: relative;
        top: 18px;
        /*If I shrink,  the BG image goes Away*/
        height: 11px;
        width: 11px;
        background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
        background-position: 4px -1387px;
        border: 1px outset #D3D3D3;
    }
    .hidden { display:none; }

</style>

<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>