I need to put a circle on a card for a mailing
but I can't put styles like these for mailing:
position: absolute;
left: 50%;
transform: translateX(-58%) translateY(-75%);
I opted to use margin-top but it doesn't work either!
Actually, I have:
My code is: ..code header
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; color: white;padding: 0px 8px 0px 8px; border-collapse:separate; background-color:#5619A4;">
<tr>
<td valign="top" style="font-size: 13px;">
<div align="center">
<table border="0" cellpadding="10" cellspacing="0" width="590" style="max-width: 50px; color: white;padding: 0px 8px 0px 8px; border-collapse:separate; background-color:transparent;margin-top:-12%;width: 25px;">
<tbody>
<tr>
<td >
<div style="max-width: 75%;background-color:white;border-radius: 16px;margin: 12%;background-color: transparent;">
<div align="center"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="margin-top:-10%;height:100px;v-text-anchor:middle;width:100px;" arcsize="600%" stroke="f" fillcolor="#ff8080">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#ff8080;border-radius:50%;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:100px;text-align:center;text-decoration:none;width:100px;-webkit-text-size-adjust:none;">1</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
CodePudding user response：
As you noticed, support for absolute positioning is pretty bad across email clients. But it can be emulated using the max-height property and the faux absolute position technique.
Here’s a full example of what you're trying to achieve based on your code.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Overlap</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; width:590px; background:#fff;">
<tr>
<td>
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:100%;"><tr><td style="font-size:0; height:50px;">
<v:oval xmlns:v="urn:schemas-microsoft-com:vml" style="position:absolute; top:0; left:245px; width:100px; height:100px; v-text-anchor:middle;" fillcolor="#ff8080" stroke="false">
<v:textbox style="color:#fff;">
1
</v:textbox>
</v:oval>
</td></tr></table>
<![endif]-->
<!--[if !mso]><!-->
<div style="max-height:50px; text-align:center;">
<div style="display:inline-block; width:100px; height:100px; border-radius:50px; background-color:#ff8080; text-align:center; font:bold 16px/100px sans-serif; color:#fff;">
1
</div>
</div>
<!--<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; width:100%; background:#5619a4;">
<tr>
<td style="padding:16px; padding-top:66px;">
<p style="margin:0; color:#fff; font:16px/24px sans-serif;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore alias accusamus repudiandae soluta, provident nam aut iste! Facilis, blanditiis, voluptatum.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
CodePudding user response：
How about using position: relative ?
The tag a would have these rules:
background-color: white;
border-radius:50%;
text-align:center;
text-decoration:none;
width:100px;
height: 100px;
display: block;
position: relative;
margin: 0 auto;
bottom: -75px;
left: 0;
right: 0;
padding: 0;
color: black;
line-height: 50px;
text-align: center;
You can adjust how much of the circle overlaps with bottom: -75px;
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; color: white;padding: 0px 8px 0px 8px; border-collapse:separate; background-color:#5619A4;">
<tbody><tr>
<td valign="top" style="font-size: 13px;">
<div align="center">
<table border="0" cellpadding="10" cellspacing="0" width="590" style=" color: white; border-collapse:separate; background-color:transparent;">
<tbody>
<tr>
<td>
<div style="">
<div align="center" style="width: 100%;text-align: center;"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="margin-top:-10%;height:100px;v-text-anchor:middle;width:100px;" arcsize="600%" stroke="f" fillcolor="#ff8080">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color: white;border-radius:50%;color:#ffffff;text-align:center;text-decoration:none;width:100px;height: 100px;-webkit-text-size-adjust:none;display: block;position: relative;margin: 0 auto;bottom: -75px;left: 0;right: 0;padding: 0;color: black;line-height: 50px;text-align: center;">1</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody></table>