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 ;)
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.sstatic.net/XlOi4.png"></td>
</tr>
<tr>
<td colspan=2>This is the overlay text</td>
</tr>
</table>I know, I deserve a downvote for this.