CSS Layout-- Make table cell contents appear in row below and set height of parent row/cell
- by Laramie
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>
