CSS expert needed

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS expert needed

Post by alex.barylski »

Don't know if you need to be an expert or not, but...

Here is my dilema...

I have a table much like:

Code: Select all

<table>
  <td><img src="" /><span style="position: absolute; top: 10px">Some Text</span></td>
  <td></td>
  <td></td>
</table>
the SPAN needs to be positioned over the image, but without using relative, because it causes problems...

How can I do this using CSS or do I have to determine the TOP/LEFT of the TD cell and position my SPAN dynamically using Javascript???

Thanks :)
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post by neophyte »

Have you tried making the image a non repeating background image?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

e.g.

Code: Select all

background-repeat: none;
RobertPaul
Forum Contributor
Posts: 122
Joined: Sun Sep 18, 2005 8:54 pm
Location: OCNY

Post by RobertPaul »

Setting the image as the background would be ideal, as neophyte mentioned.

But if you can't do that, giving your TD's position:relative should do the trick. Absolutely positioned elements are layed out relative to the first relatively positioned parent above them. In other words, you want:

Code: Select all

<table>
  <td style="position: relative;"><img src="" /><span style="position: absolute; top: 10px">Some Text</span></td>
  <td></td>
  <td></td>
</table>
Of course, if your image has any margins or borders, it's going to throw things off a little.

If that doesn't work, let me know ... there's more than one way to do this but I don't want to confuse things.
Post Reply