shifting a piece of text down using CSS

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

You might be better off using:

.price-label { margin-top: 6px; }

It's difficult to know more without some context of what else is around that table cell though.

Answer 2

If you want to shift it down, you need to shift it a positive 6px, not a negative 6px, and set the top property, not bottom

position: relative;
top: 6px;

Answer 3

Use padding-top:6px; instead of positioning, which can get very messy with relation to sibling elements etc.. and has other-side effects.

Answer 4

Label is an inline element, margin/padding would only work when you make it a block (inline-block, block or float). Try this:

.price-label {
        padding:6px 0 0;
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline; }

Answer 5

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 botom vertically align the text in the cell and add some padding-top until it's aligned properly.