Question

I want to shift a text label down by about 6px I am attaching the style:

.price-label{
    font-family:Arial, Helvetica, sans-serif;
    font-size:small;
    position:relative;
    bottom:-6px;
    vertical-align:bottom;
}

The HTML is:

<table border="0" cellspacing="1" cellpadding="0">
    <tr>
        <td height="45" colspan="2" align="center"><p><span class="text">Name</span><span class="name-label"></span></p></td>
        </tr>
            <tr>
                    <td>&nbsp;</td>
                    <td class="price-label">54.67</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CCCCCC">&nbsp;</td>
                    <td height="45">&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CC3300">&nbsp;</td>
                    <td height="112">&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CCCCCC">&nbsp;</td>
                    <td height="22">&nbsp;</td>
                  </tr>
                </table>

Visually I want the 54.67 label to appear horizontally parallel – to the gap where the grey cell (top one) and red cell (second from top) meet. As the number represents that point in the bar to the left.

So if some other technqiue is better, please let me know, maybe I should be using DIVs would that give me more control?

Answer 1

If I’m reading this correctly, then you’re trying to straddle the border between two table cells which won’t work. You’ll need to consolidate the first two cells in the right column and then rowspan=”2″ the new cell with the number in it. Then top or bottom vertically align the text in the cell and add some padding-top until it’s aligned properly.