Float text over image within table cell

Question

I am trying to float text over an image in the 3rd column of the first row within a table. This cell has an <img> within it (processed by psd slicing) and I want to put text over it. I have tried float: left and position: absolute but nothing seems to work.

Any ideas?

Solution 1

position:absolute in combination with a z-index should work.

If it is possible in your design, you can also use the image as the background of the table cell and just put the text as its contents.

Edit: Also see this question about a problem I had in only IE with text on top of an image.

Solution 2

Although I also recommend the canonical approach (putting the image as a background), here's a solution that does it just with positioning:

<td style="position:relative;">
    <img src="..." style="position:absolute;z-index:1;" />
    <div style="z-index:2;position:relative;">your text goes here</div>
</td>

You may find it useful for further reference.

Comments

[mattgcon]

Would I still be able to maintain the 0 border for the images if I change it to background images. All of the images in the table create one large image

[jeroen]

As long as the cell has the right dimensions, it should work perfectly. Also note that background images never have borders.

[Alin Purcaru]

Don't forget to remove table border and cellspacing if needed.

[mattgcon]

This works thank you Jeroen, of courseit is going to be tedious task for styling all of my data entry search fields but at least it looks good. thank you