I was trying to nest a bulletproof background inside a bulletproof background, then inside that have a bulletproof button.

So i will have a image then a opacity layer over half of that and then text with a bulletproof button or just an image for a button.

For the most part it works in everything apart from outlook 7,10 and 13 to no surprise

The reason i'm doing this is to make the email very easy to edit as the template will be used for 8 other emails,

But the only problem that i'm having is it seems to be offsetting the inner div or vml to the top and left.

Just wondering if anyone could help me fix this as i'm at the last hurdle. I'm so close to it working in everything.

heres the code

> 
> <!doctype html>
> <html>
> <head>
> <meta charset="UTF-8">
> <title>Untitled Document</title>
> </head>
> 
> <body>
> 
> 
> <table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
> 
> <tr>
> <td height="20">&nbsp;</td>
> </tr>
> 
> 
> <tr><td align="center">
> <!-- first layer -->
> 
> <table cellpadding="0" cellspacing="0" border="0" height="350" width="600">
> <tr>
> <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#eb8f7b" width="600" height="350" valign="top">
> <!--[if gte mso 9]>
> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:350px;">
> <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#eb8f7b" />
> <v:textbox inset="0,0,0,0">
> <![endif]-->
> <div>
> 
> 
> <table cellpadding="0" cellspacing="0" border="0" width="300">
> <tr><td>
> <!-- opacity layer -->
> 
> <table cellpadding="0" cellspacing="0" border="0" height="350" width="300">
> <tr>
> <td background="http://imgur.com/0QAXBa4.png"  width="300" height="350" valign="top">
> <!--[if gte mso 9]>
> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:300px;height:350px;">
> <v:fill type="tile" src="http://reporting.halfordsautocentres.com/images/modular/20151210-halfords-mod-orange-block.png" />
> <v:textbox inset="0,0,0,0">
> <![endif]-->
> <div>
> 
> <table cellpadding="0" cellspacing="0" border="0" width="200" height="350" align="center">
> <tr><td width="200" height="350" align="center">
> 
> <!-- bullet proof button -->
> 
> <div><!--[if mso]>
> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
> <v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#556270" />
> <w:anchorlock/>
> <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
> </v:roundrect>
> <![endif]--><a href="https://"
> style="background-color:#556270;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a></div>
> 
> <!-- bullet proof ends -->
> 
> </td></tr>
> </table>
> 
> </div>
> <!--[if gte mso 9]>
> </v:textbox>
> </v:rect>
> <![endif]-->
> </td>
> </tr>
> </table>
> 
> 
> 
> <!-- opacity layer ends -->
> </td></tr>
> </table>
> 
> 
> 
> 
> 
> </div>
> <!--[if gte mso 9]>
> </v:textbox>
> </v:rect>
> <![endif]-->
> </td>
> </tr>
> </table>
> 
> 
> 
> <!-- first layer ends -->
> </td></tr>
> </table>
> 
> 
> 
> </body>
> </html>