I am not able to click the element which is in div and is hidden. Tried Action builder and JS executor still not able to click. Below is the html sample.
This is partial html i have shared. On mouse hover the "Simulate button" will active to click.
Please do help me.
<div id="isc_MR" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:204302;CURSOR:pointer;" eventproxy="isc_Button_105">
<table width="100%" height="100%" cellspacing="0" cellpadding="0"
style="table-layout:fixed;overflow:hidden;">
<tbody>
<tr>
<td class="button" valign="center" nowrap="true" align="center"
onfocus="isc_Button_105.$47()" tabindex="-1" '="" style="padding-
top:0px;padding-bottom:0px;">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="button"
style="margin:0px;border:0px;padding:0px;background-
image:none;background-color:transparent;font-size:1px;padding-
right:6px"><img width="16" height="16" border="0" align="absmiddle"
suppress="TRUE" eventpart="icon" style="vertical-align:middle"
name="isc_MRisc_Button_105$4u" src="http://test2.mond-
cloud.com/mond03/images/silk/simulate.png">
</td>
<td class="button" nowrap="true"
style="margin:0px;border:0px;padding:0px;background-
image:none;background-color:transparent;">Simulate</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
I am creating an email template and the header section of the email is a code block I took from another site.
The said header code block contains a logo and few text next to it. Here is an image of it.
In the editor of the Email Service Provider I use, the code block is fully visible but when I click on preview, the text dissapears and only the logo is visible like this
Does anyone know why is that.
Here is the code
`
<td class="esd-stripe" align="center">
<table class="es-header-body" align="center" cellpadding="0" cellspacing="0" width="550" style="background-color: #f6f3f0;" bgcolor="#f6f3f0">
<tbody>
<tr>
<td class="esd-structure es-p20" align="left">
<!--[if mso]><table width="560" cellpadding="0"
cellspacing="0"><tr><td width="98" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left">
<tbody>
<tr>
<td width="98" class="es-m-p0r es-m-p20b esd-container-frame" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-image es-m-txt-c" style="font-size: 0px;"><a target="_blank" href="https://viewstripo.email"><img src="https://ychxix.stripocdn.email/content/guids/CABINET_d3bb686276c9132ac5465c69a2399624/images/carla_logo.png" alt style="display: block;" width="65"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="20"></td><td width="442" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" align="right">
<tbody>
<tr>
<td width="442" align="left" class="esd-container-frame">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="esd-mobile-hidden">
<td align="center" class="esd-block-spacer" height="16"></td>
</tr>
<tr>
<td class="esd-block-menu" esd-tmp-menu-color="#2d0824">
<table cellpadding="0" cellspacing="0" width="100%" class="es-menu">
<tbody>
<tr class="links">
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/" style="color: #169179;"><b>Home<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/contact" style="color: #169179;"><b>About<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/about" style="color: #169179;"><b>Contact<b></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
`
I tried to change the font color and backround color to see if that was overlapping the text, but it didnt work.
I am working on HTML email template. There is a small spacing below the image and I am not able to get rid of it. And this space is caused by the DOCTYPE is all I know.
Sample Image
I tried everything possible like:
Adding style="display:block" to the image.
Setting the "Align" Attribute to "absmiddle", "absbottom", "texttop", "middle", "left", "right" and "top".
Setting the Line-Height to 10px or Less by placing the image in div.
Setting Font-Size to 2px or Less.
Using Float:Left or Float:Right.
But nothing seemed to work for me. Can anyone help me figure it out please ?
I having been trying to figure it out for the past two days :P
I have attached the sample code below:
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;">
<div class="mj-column-px-600 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<a href="#">
<img src="./assets/img/hero#3x.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
So I place a picture in first table to position absolute to have text appear above it but the problem I'm having now is the table below text is also appearing on the image. How Do I prevent this from happening ?
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td>
<img src="img/suit1.jpeg" width="590px;" height="500px;" style="position:absolute">
<h1>each</h1>
<button>SHOP Now</button>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td>
<h1>hello</h1>
</td>
</tr>
</table>
</td>
</tr>
Please try applying position: absolute to text elements. In my solution, i've wrapped text inside a div and applied position: absolute property. Also, i've applied position: relative to the parent element of both image and text.
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td style="position:relative;">
<img src="img/suit1.jpeg" width="590px;" height="500px;">
<div style="position:absolute; top: 0; left: 10px;">
<h1>each</h1>
<button>SHOP Now</button>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td>
<h1>hello</h1>
</td>
</tr>
</table>
</td>
</tr>
I have no idea what's going on. The sections show up in preview and test emails, but when I add template to a campaign, suddenly the Contact and Facebook section is gone. WHYYY. It makes no sense why it's just disappearing when I add it to a campaign. This is the section that disappears when I add email template to the campaign. Is something wrong with the tables? I looked at CSS and there's hardly anything.
<!-- Facebook Recommendation -->
<div mc:repeatable="Select" mc:variant="facebook recommendation">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#231C15">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:60px 0px 60px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:40px;line-height:40px;text-align:center;font-weight:bold;padding-bottom:20px;">
<div mc:edit="text_16">Recommend us on Facebook!</div>
</td>
</tr>
<tr>
<td class="text pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_18">Recommend us on our Facebook page! This ensures we can reach even more people to provide the best possible care during their move! </div>
</td>
</tr>
<!-- Button -->
<tr mc:hideable>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-button" style="background:#fff;color:#231C15;font-family:Lato, Arial, sans-serif;font-size:14px;line-height:18px;padding:12px 20px;text-align:center;letter-spacing:1px;font-weight:600;text-transform:uppercase;border-radius:22px;">
<div mc:edit="text_19">
<span class="link-white" style="color:#231C15; text-decoration:none;">RECOMMEND US</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END Button -->
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Facebook Recommendation -->
<!-- Contact -->
<div mc:repeatable="Select" mc:variant="Contact">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:30px 0px 0px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 center pb15" style="color:#000000;font-family:Roboto, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:bold;text-align:center;padding-bottom:10px;">
<div mc:edit="text_37">Contact Us</div>
</td>
</tr>
<tr>
<td class="text-center pb30" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_38">Looking to make another move? <br>Give us a call!</div>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom:50px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1a994bda-97c5-4ebf-b478-de1e3e2e6d6c.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_20">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_39">
<strong class="link" style="color:#777777;text-decoration:none;">855-624-4537</strong>
</div>
</td>
</tr>
</table>
</th>
<th class="column-empty2" width="30" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/9e146158-5e5d-4d4d-a99e-02f32506799a.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_21">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_40">
<a target="mailto:service#moveandstore.com" class="link" style="color:#777777;text-decoration:none;"><strong class="link" style="color:#777777;text-decoration:none;">service#moveandstore.com</strong></a>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction:rtl;">
<tr>
<th class="column" dir="ltr" width="433" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
<th class="column-empty" dir="ltr" width="40" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column" dir="ltr" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END Contact -->
Okay - From my limited knowledge with MailChimp I think I have stumbled across something.
I see in your table you have the mc:repeatable="Select" attribute. From the MailChimp help section - this says that this will be hidden automatically unless a user adds it via the campaign builder.
Add the mc:repeatable attribute to any area that includes an mc:edit attribute to create a content block that can be repeatedly added to a template. Repeatable content areas are hidden by default so they only appear in a template if you add them within the Campaign Builder.
Source: Mailchimp help (create editable content areas with mailchimps template language)
I need to move personal account to center and gave align as centre but still not working. I don't have any clue where am lagging.
<table cellspacing="1" cellpadding="0" width="750" align="center" bgColor="#000000" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="750" align="center" bgcolor="#ffffff">
<tr>
<td width="34%" bgcolor="#ff0000" colspan="5">
<div class="mainheader">Personal & Account
</div>
</td>
<td width="33%" bgcolor="#ff0000">
<div align="right">
<button class="button" id="btnLogin" accessKey="P" type="button" runat="server">Login </button>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Indeed as mentioned in the comment by j08691, try avoiding tables for layout.
For a solution to your issue, I'll keep your tabular layout as I want to keep up with your question's code, but here's a solution which starts with removing the second inner td - as you dont need it for floating the button to the right side.
I've changed your two columns to one column and inside of this column inserted a div with the desired layout - a text in the middle and a button in the right side.
The button is floated right by "float: right;" and the text is aligned to the center of the div by "text-align: center". Try using the same approach for future layout design.
Here is a working example with the below code:
<table cellspacing="1" cellpadding="0" width="750" align="center" bgColor="#000000" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="750" align="center" bgcolor="#ffffff">
<tr>
<td width="34%" bgcolor="#ff0000" colspan="5">
<div class="mainheader" style="text-align: center">Personal & Account
<button class="button" id="btnLogin" accesskey="P" type="button" runat="server" style="float: right;">Login </button>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td bgcolor="#1f4e79" colspan="5">
<div class="mainheader" style="margin-left:325px;" >Restraint & Seclusion
</div>
</td>
<td width="33%" bgcolor="#1f4e79">
<div align="right">
<button class="button" id="btnLogin" accessKey="P" type="button" runat="server">Login </button>
</div>
</td>
</tr>