How to put text over an image without absolute positioning or setting the image as backbround

css, css-float, css-position, hotmail, html

Solution

I used to pull stunts like this all the time as soon as tables came. Really ugly, and may seriously embarrass any validator you run it trough: overlapping table cells. Works in most browsers though and even without css.

Example:

<table>  
  <tr>
    <td></td>
    <td rowspan=2><img src="//i.stack.imgur.com/XlOi4.png"></td>
  </tr>  
  <tr>
    <td colspan=2>This is the overlay text</td>
  </tr>  
</table>

I know, I deserve a downvote for this.

Problem

I'm trying to see if it is possible to put some text over an image without using position: absolute or having the image being, the background of an element. The reason for the constraints is that the HTML code is going into an e-mail, and it turns out that hotmail supports neither. I remember that when I first began studying CSS, fiddling around with float-ing text around images I often ended up with the text merrily going all over the image. Sadly, I can't reproduce that behavior. Full story (edited in): I received a fancy layout from the graphics designer. It's basically a nice background picture, with logos linking to websites and what basically is a "text goes here" area in the middle. As usual in these cases, I'm using tables to make sure that everything stays in place AND works crossbrowser+crossmailclient. The problem arises from the fact that the middle "text goes here" area is not a white rectangle, but has a some background graphics. Having made some test, it appears that Live Hotmail does not seem to like neither position: absolute or background-image; relative margins are also not good because they'd ruin the rest of the layout. Current version, works in any other mail client/website: ``` ... <td> <img src='myimage.jpg' width='600' height='400' alt=''> <p style="position: absolute; top: 120px; width: 500px; padding-left: 30px;"> blablabla<br> yadda yadda<br> </p> </td> ... ``` Of course, “it's not possible” could be a perfectly acceptable answer, but I hope not ;)

Original source