RoundRect taking top left position of its rect container instead of direct parent (td)

I'm working on an email and we could not understand why we're having an Outlook Issue

I have a roundrect to have a round CTA in Outlook, for this I used VML

Result should be :

But in Outlook, I noticed that only roundrect moves to top left of the container

The Background is red or yellow, those colors are used to jsut identify the blocks that are not aligning preperly

NOTE that when I remove the container '<v:rect><v:fill ... ', the CTA renders correctly, so I don't know what's the issue

To display the round CTA I used : (inside a VML if else (if mso))

<table align="center" cellpadding="0" cellspacing="0">
<tr>
  <td align="center" height="60" width="640" bgcolor="yellow">
    <table align="center" cellpadding="0" cellspacing="0" height="40" width="240" bgcolor="#333">
      <tr>
        <td bgcolor="#191108" style="-webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; position:relative; color: #ffffff; border: 1px solid #191108;" height="40" width="240">
          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://fr.brand.com/fra-fr/homepage" style="height:40px;v-text-anchor:middle;width:240px;position:relative;" arcsize="50%" strokeweight="1" strokecolor="#191108" fillcolor="#191108">
            <w:anchorlock/>
            <center style="color:#FFFFFF;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:16px;">Book an appointment</center>
          </v:roundrect>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>
                                  

And in the td container containing the block I have had

<td align="center" background="https://image.client.brand.com/lib/fe8e13727761037870/m/1/8be9b46b-3cee-40e1-a663-26d82aff0447.jpg" class="stylingblock-content-wrapper camarker-inner" style="background-position:bottom;background-repeat:no-repeat;background-size:contain;border-collapse:collapse;mso-line-height-rule:exactly;background-image: url(https://image.client.brand.com/lib/fe8e13727761037870/m/1/8be9b46b-3cee-40e1-a663-26d82aff0447.jpg); vertical-align: bottom;" valign="top">
  <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:300px;">
       <v:fill type="frame" src="https://image.client.brand.com/lib/fe8e13727761037870/m/1/8be9b46b-3cee-40e1-a663-26d82aff0447.jpg" color="#ffffff" />
  <![endif]-->

    .... Content inside ....

  <!--[if gte mso 9]>
    </v:rect>
  <![endif]-->
</td>

And Whole code is

<table cellpadding="0" cellspacing="0" class="stylingblock-content-wrapper" role="presentation" style="background-color: #FFFFFF; min-width: 100%;" width="100%">
  <tr>
    <td style="padding: 0px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;max-width:640px;margin-left:auto;margin-right:auto;" width="100%">
        <tr>
          <td align="center" background="https://image.client.brand.com/lib/fe8e13727761037870/m/1/8be9b46b-3cee-40e1-a663-26d82aff0447.jpg" class="stylingblock-content-wrapper camarker-inner" style="background-position:bottom;background-repeat:no-repeat;background-size:contain;border-collapse:collapse;mso-line-height-rule:exactly;background-image: url(https://image.client.brand.com/lib/fe8e13727761037870/m/1/8be9b46b-3cee-40e1-a663-26d82aff0447.jpg); vertical-align: bottom;" valign="top">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:300px;">
              <v:fill type="frame" src="https://image.client.brand.com/lib/fe8e13727761037870/m/1/8be9b46b-3cee-40e1-a663-26d82aff0447.jpg" color="#ffffff" />
              <![endif]-->
              <table align="center" border="0" cellpadding="0" cellspacing="0" class="s-100pc" role="presentation" style="border-collapse:collapse; margin-left:auto; margin-right:auto; max-width:640px;" width="640">
                <tr>
                  <td align="center" class="xs-heightReset" height="300" style="vertical-align:top; height: 300px;" valign="top">
                    <table cellpadding="0" cellspacing="0" style="min-width: 100%;" width="100%">
                      <tr>
                        <td>
                          <div data-id="1_CTA_primary">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" bgcolor="yellow" style="background:yellow;border-collapse: collapse;" width="100%">
                              <tr>
                                <td align="center" bgcolor="red" style="background:red;position:relative;" valign="middle">
                                  <!--[if mso]>
                                  <table align="center" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td align="center" height="60" width="640" bgcolor="yellow">
                                        <table align="center" cellpadding="0" cellspacing="0" height="40" width="240" bgcolor="#333">
                                          <tr>
                                            <td bgcolor="#191108" style="-webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; position:relative; color: #ffffff; border: 1px solid #191108;" height="40" width="240">
                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://fr.brand.com/fra-fr/homepage" style="height:40px;v-text-anchor:middle;width:240px;position:relative;" arcsize="50%" strokeweight="1" strokecolor="#191108" fillcolor="#191108">
                                                <w:anchorlock/>
                                                <center style="color:#FFFFFF;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:16px;">
                                                  Book an appointment
                                                </center>
                                              </v:roundrect>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                  <![endif]-->
                                  <!--[if !mso]> <!-->
                                    <table align="center" cellpadding="0" cellspacing="0">
                                      <tr>
                                        <td align="center" bgcolor="#191108" height="40" style="-webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; color: #ffffff; display: block; border: 1px solid #191108;" width="240">
                                          <a href="https://fr.brand.com/fra-fr/homepage" style="color: #FFFFFF; font-size:16px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block;">Book an appointment</a>
                                        </td>
                                      </tr>
                                    </table>
                                    <!-- <![endif]-->
                                </td>
                              </tr>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              <!--[if gte mso 9]>
            </v:rect>
            <![endif]-->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

VML within VML is known to be an issue. I'm not sure of the exact issue, but as you say "NOTE that when I remove the container '<v:rect><v:fill ... ', the CTA renders correctly, so I don't know what's the issue".

Another possible solution is to remove the position:relative statements. I'm not sure why that's there.

You've probably got way too many tables in there complicating things. You can in fact simplify to a single tr, td (with outside padding and bgcolor), v:roundrect, anchorlock, center, text structure. Although yes, you'll probably need one more table, tr, td for the background image.

But if you're happy with the structure you might also try using a wrapper to inset the offending parts:

<v:textbox inset="0,30px,0,0"> ... </v:textbox>

I can't remember which direction all of these go in, but the 30px is right margin. Could be left, right, top, bottom, you'll have to test. This would work with the position:relative I assume.