Resize image and add an overlay image without using tables and without losing style in xml
I am building a system to create a "fake video embed" with thumbnails and play buttons over them. The images are coming from a service at a standard size, so have no choice but to resize them in HTML. Another restriction is, the codeblock has to be self-contained (like an embed code) and not reliant on any external stylesheets. I'm overlaying a play button as a transparent PNG. My first solution was to set a negative margin on the overlay image with inline css like so:
    
    <div style="width:340px;height:280px;">
    <img src="thumbnail.jpg" width="340" height="280"/>
    <div style="margin-top:-280px;"><a href="link-to.video.html">
    <img src="transparent-embed-overlay.png" 
    border="0"></a></div></div>

But in the XML feed for the blog, the transparent play button would "fall off" the "embeds" because it wouldn't recognize the inline style. This forced me into having to write a one-cell table with the image as a background image. But then it was impossible for me to resize the standard image thumbnail I am given, shoehorning me into the default thumbnail size.

FWIW, here's the code I'm resorting to using:

    <table width="320" height="240" background="thumbnail.jpg">
    <tr><td><a href="link-to-video.html">
    <img src="transparent-overlay.jpg" border="0"></a></td></tr></table>
 

Resize image and add an overlay image without using tables and without losing style in xml
===

I am building a system to create a "fake video embed" with thumbnails and play buttons over them. The images are coming from a service at a standard size, so have no choice but to resize them in HTML. Another restriction is, the codeblock has to be self-contained (like an embed code) and not reliant on any external stylesheets. I'm overlaying a play button as a transparent PNG. My first solution was to set a negative margin on the overlay image with inline css like so:
    
    <div style="width:340px;height:280px;">
    <img src="thumbnail.jpg" width="340" height="280"/>
    <div style="margin-top:-280px;"><a href="link-to.video.html">
    <img src="transparent-embed-overlay.png" 
    border="0"></a></div></div>

But in the XML feed for the blog, the transparent play button would "fall off" the "embeds" because it wouldn't recognize the inline style. This forced me into having to write a one-cell table with the image as a background image. But then it was impossible for me to resize the standard image thumbnail I am given, shoehorning me into the default thumbnail size.

FWIW, here's the code I'm resorting to using:

    <table width="320" height="240" background="thumbnail.jpg">
    <tr><td><a href="link-to-video.html">
    <img src="transparent-overlay.jpg" border="0"></a></td></tr></table>
 
