I have an Iframe embedded on my Facebook page but when i was recently editing it I have killed all the links on it..
I was wanting to add button links directly under the banner and have them centred, can someone help me put together the code to do this, I am a newbie to coding so any help is appreciated.
to find my iframe you can follow this link
https://www.facebook.com/PhotographyBok/app/190322544333196/
but the code for my iframe is currently this.
<html>
<head>
<title>""</title>
</head>
<body bgcolor="#000000">
<br>
<table width="768" border="0" align="center" cellpadding="4" cellspacing="2" style="text-align: center">
<tr>
<td height="70" colspan="3" align="center" valign="middle" bgcolor="#000000">
<img src="https://farm1.staticflickr.com/756/23511757696_469b593243_b.jpg"</h1></td>
</tr>
<tr>
<td width="124" rowspan="3" valign="top" bgcolor="#000000">
<button>Timeline</button>
<button>Portfolio</button>
<button>Shop Now</button>
<td width="459" height="118" valign="top" bgcolor="#000000" style="text-align: center">
<font color="white">"I am a self proclaimed weekend photographic warrior.
I began learning photography when I was 15, working part time in a photographic lab, developing negatives and selling camera's, I started shooting myself with a 35mm Pentax SLR that I purchased second hand in Wellington New Zealand for $10, this served me well to learn the basics about aperture, focal length and shutter speed. Now I currently shoot with a Sony A380 DSLR.
I am constantly learning, adapting and improving, comments and followers are welcome and thanked.
My favourite photographer is Ansel Adams, I take the following quote into life and into photography."</font>
</td>
<td width="153" rowspan="3" valign="top" bgcolor="#000000">
</td>
</tr>
<tr>
<td height="433" valign="top" bgcolor="#000000"> <font color="white">"When words become unclear, I shall focus with photographs, when images become inadequate, I shall be content with silence. - Ansel Adams"</font></td>
</tr>
<tr>
<td height="44" valign="top" bgcolor="#FFFFC2">© Marcus Bok</td>
</tr>
</table>
</body>
</html>
Try this: http://jsfiddle.net/jo3atpz9/
<body bgcolor="#000000">
<br>
<table width="768" border="0" align="center" cellpadding="4" cellspacing="2" style="text-align: center">
<tr>
<td height="70" colspan="3" align="center" valign="middle" bgcolor="#FFFFC2">
<img src="https://farm1.staticflickr.com/756/23511757696_469b593243_b.jpg" </h1></td>
</tr>
<tr>
<td colspan="3">
<div style="text-align: center; width: 100%">
<button onClick="window.location.href='http://www.google.com'">Google</button>
<button onClick="window.location.href='http://www.google.com'">Google</button>
<button onClick="window.location.href='http://www.google.com'">Google</button>
</div>
</td>
</tr>
<tr>
<td width="124 " rowspan="3 " valign="top " bgcolor="#FFFFC2 ">
<td width="459 " height="118 " valign="top " bgcolor="#FFFFC2 " style="text-align: center ">
"insert new BIO here "
</td>
<td width="153 " rowspan="3 " valign="top " bgcolor="#FFFFC2 ">
</td>
</tr>
<tr>
<td height="433 " valign="top " bgcolor="#FFFFC2 "> " "When words become unclear, I shall focus with photographs, when images become inadequate, I shall be content with silence. - Ansel Adams"</td>
</tr>
<tr>
<td height="44" valign="top" bgcolor="#FFFFC2">© Marcus Bok</td>
</tr>
</table>
</body>
Related
I have tried multiple times to sort out the "Ghost table" for this email template to render in Outlook mobile and online to no success. For some reason it misaligns when printing into Outlook.
Desired look:
What I am getting (both Outlook online and mobile):
Code (This version contains no ghost tables to make it easier):
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="padding content" style="padding-top:0px;padding-right:25px;padding-bottom:5px;padding-left:25px;width:100%;text-align:left; font-size:20px;">
<p style="font-size:23px; font-weight:bold;line-height: 30px;padding-bottom: 5px;">
First 3 Things To Try</p>
<table align="left" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td align="left">
<table width="150" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<!--[if (gte mso 9)|(IE)]>
<td style="padding-top:15px;padding-bottom:15px;">
<![endif]-->
<td width="150" align="left" style="border-top:4px solid #4D5358;"></td>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="padding content" style="padding-top:0;padding-right:25px;padding-bottom:20px;padding-left:25px;width:100%;text-align:left;font-size:15px;">
<table>
<tr>
<td width="80">
<img src="https://i.ibb.co/nnb4qnY/user.png" width="50" height="50" alt="" style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;">
</td>
<td width="370">
<p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Setup Your Profile Picture</strong></p>
</td>
<td width="150">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" style="border-radius:4px;" bgcolor="#007da5">
<a target="_blank" href="#" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #007da5;border:1px solid #007da5;border-radius:4px;padding:11px 20px;display: inline-block;">Learn
More
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="padding-top: 10px;padding-bottom: 10px;">
<p style="font-size:18px;line-height: 23px;min-width:600px;">Its tough to tell who's behind the mask sometimes. Give us a chance to remember what your face looks like by adding a profile picture to your account. Upon setting up your profile picture, within 48 hours it will be seen across all Office
365 products, including Teams and Outlook. Please select a work-appropriate photo.</p>
</td>
</tr>
</table>
<table>
<tr>
<td width="80">
<img src="https://i.ibb.co/V2R8KDW/mobile.png" width="50" height="50" alt="" style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;">
</td>
<td width="370">
<p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Get Setup On Your Mobile</strong></p>
</td>
<td width="150">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" style="border-radius:4px;" bgcolor="#007da5">
<a target="_blank" # " target="_blank "
style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #007da5;border:1px solid #007da5;border-radius:4px;padding:11px 20px;display: inline-block; ">Learn
More
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3 " style="padding-top: 10px;padding-bottom: 10px; ">
<p style="font-size:18px;line-height: 23px;min-width:600px; ">With Teams and Outlook mobile apps now available to all staff, it is possible to stay in touch, even when on the go. Follow the link to see how to get setup for both Android and iPhone devices. Link best viewed on a computer.</p>
</td>
</tr>
</table>
<table>
<tr>
<td width="80 ">
<img src="https://i.ibb.co/NTfj3jJ/feature.png " width="50 " height="50 " alt=" "style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px; ">
</td>
<td width="370 ">
<p style="font-size:18px;line-height: 23px;min-width:600px; display: inline; "><strong>Explore!</strong></p>
</td>
<td width="150 ">
<table border="0 " cellpadding="0 " cellspacing="0 " role="presentation " style="border-collapse:separate;line-height:100%; ">
<tr>
<td align="center " style="border-radius:4px; " bgcolor="#007da5 ">
<a target="_blank "href="# " target="_blank "
style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #007da5;border:1px solid #007da5;border-radius:4px;padding:11px 20px;display: inline-block; ">Learn
More
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3 " style="padding-top: 10px;padding-bottom: 10px; ">
<p style="font-size:18px;line-height: 23px;min-width:600px; ">With office 365 there are tons of new features across all applications that will make your workday experience easier and more efficient. Head to Halton's Office 365 hubpage to begin exploring all the features offered. Link best viewed on a computer </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
Any help is greatly appreciated.
This will have to be more of a 'try these things' answer since there may be multiple issues.
First, I've never had any luck with colspans (or rowspans). Edit them out by nesting a new table in there.
Second, it may be that Outlook is running out of space. You've got min-widths of 600px, and padding as well. You usually only have 600px on desktops, and on mobiles, it's more like 300px. <td> elements will expand to the size necessary automatically, so if it doesn't need to be a specific width (your icon and buttons will need to be), then don't set it.
Third, you've ghost tables incorrectly. You only need them to fix something that Outlook (desktop) doesn't recognise, like max-width (and I probably min-width, but I've never needed to use that). It needs to be semantically correct, so this construction:
<!--[if (gte mso 9)|(IE)]>
<td style="padding-top:15px;padding-bottom:15px;">
<![endif]-->
<td width="150" align="left" style="border-top:4px solid #4D5358;"></td>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
Will render two <td> elements straight after each other. If you want something different for non-Outlook desktops, then use this:
<!--[if !mso]>-->
<td width="150" align="left" style="border-top:4px solid #4D5358;"></td>
<!--<![endif]-->
Fourth, consider what you want the layout to look like under a 300px viewport width. That may totally mess with your construction. But you can use #media screen and (max-width:600px) in a <style> section to set different styles for mobile (notwithstanding limitations on some versions of Gmail app, namely, Gmail IMAP/POP).
Fifth, buttons are a whole extra beast. I'm not going to answer it here since it deserves it's own question. Essentially, Outlook won't change an inline element to inline-block or block (or vice-versa). You have to style a <td> section and the <a> just gets colour and text-decoration.
I am facing a very annoying issue regarding HTML mails. My mail template is working absolutely fine with all browsers and it is showing perfectly fine in gmail, office mail (web). But with outlook client I am getting 4 pixel extra padding.
I have checked the compute section where I can see the image size which I have defined and actual size in mail are different.
Here I am attaching the problematic part screenshot for your reference.
Could you please help me on it.
HTML Code
<table width="859" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="180"><img src="/sites/default/files/img/report_mail_header.jpg" alt="" /></td>
</tr>
<tr>
<td height="136"><img src="/sites/default/files/img/report_mail_title.jpg" alt="" /></td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f9f9f9">
<tr>
<td colspan="3" height="58"><img src="/sites/default/files/img/box1.jpg" alt="" /></td>
</tr>
<tr>
<td width="111" height="354"><img src="/sites/default/files/img/box4.jpg" alt="" /></td>
<td valign="top">
<table width="90%" cellspacing="0" cellpadding="5" border="0" align="center">
<tr>
<td align="center" style="font-size:18px;line-height:135%"><br><br>Details of the accounts that are part of our community of ****<br><br>Account status: <font color="#1f6d79">active or inactive institutions</font>
<br>Details of the <font color="#83babc">institutions that are really reporting</font>
<br>The details of the <font color="#1f6d79">accounts that entered to the platform the last month</font>
<br>As you know, "*** **** ****" is an initiative to create value to our customers - Leading our team to gain differentiation and loyalty
<br><strong><font color="#1f6d79">Best Regards,<br>**** ****</font></strong></font>
</td>
</tr>
</table>
</td>
<td width="114" align="right"><img src="/sites/default/files/img/box2.jpg" alt="" /></td>
</tr>
<tr>
<td colspan="3" height="132"><img src="/sites/default/files/img/box3.jpg" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="120"><img src="/sites/default/files/img/report_mail_footer.jpg" alt="" /></td>
</tr>
</table>
I have a button module I've made for Marketo. It checks out fine, but once I integrate it with my template and place a module below it — the module below it not only inherits the buttons styles (associated with type, ie. size, uppercase, bold) but also gains a little width too and aligns left. The button module stays uneffected — yet whatever is below it gets messed with. I can't figure out what is doing this in the buttons code because it looks clean to me.
Not sure if anyone can help, but take a look at my button code and let me know if you see anything unusual.
<tr class="mktoModule" id="oneButton" mktoName="One Button Module" mktoAddByDefault="false">
<td align="center">
<table width="600" align="center" valign="middle" class="breakpoints" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin:0 auto;width:600px;">
<tr>
<td align="center" valign="middle" style="padding:30px 0px 37px 0px;">
<table width="100%" align="center">
<tr align="center">
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center ">
<td align="center " style="padding-bottom:0; " valign="top">
<table align="center " border="0 " cellpadding="0 " cellspacing="0 " style="width:270px;border-collapse:separate;background-color:#FDB71A;border-radius:3px; ">
<tr align="center ">
<td class="mktoText" mktoName="Button — First CTA — Yellow" id="button-first-cta-single" align="center " height="45 " style="text-align:center;height:45px;font-family:Arial;font-weight:bold;" valign="middle ">CTA Button
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
How are you integrating the new module (are you coding it in or are you dragging it in via wisiwyg?
There are a lot of td sections in here so I'm wondering if it's possible that this is sitting in the One Button Module tr by mistake?
Is it me or is gmail bulls**t?
On outlook/browsers my email is perfect but on gmail there is a space between 2 tables, WHY?!?
Picture: http://i.imgur.com/srJKBJZ.png
Please do not tell me cellspacing,padding or border space they are all already in the code. If you can help me I would really appreciate it. Thanks in advance!!
Code:
<body style="margin:0; padding:0">
<table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td VALIGN="bottom">
<img src="http://i.imgur.com/vyJu43v.png">
</td>
<td VALIGN="bottom">
<img src="http://i.imgur.com/vSAgEXE.png">
</td>
<td VALIGN="bottom">
<img src="http://i.imgur.com/Ih5jtiC.png">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0">
<tr>
<td rowspan="4" VALIGN = "top">
<img src="http://i.imgur.com/9B9Wcit.png">
</td>
<td>
<p style="font-family:arial; color:#002d62;">The new Insight Snapshot newsletter from Opinion Matters is packed full of research<br/>and communication ideas to inform your next project. Featuring tips for data<br/>storytelling, ways to interact with your target audience through online quizzes and<br/>case study examples of recent international survey campaigns.</p>
<p style="font-family:arial; color:#002d62">Read online here or request a printed copy</p>
</td>
<td rowspan="4" VALIGN = "top">
<img src="http://i.imgur.com/lNwkYpL.png">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/79k0VgK.png">
</td>
</tr>
<tr height="70">
<td height="70">
<p style="font-family:arial; color:#002d62;">If you would like to speak to a member of the team regarding any of the features in<br/>the newsletter please call 0207 251 9960 or email newsletter#opinionmatters.com</p>
</td>
</tr>
<tr>
<td VALIGN = "bottom">
<img src="http://i.imgur.com/brGmdjG.png">
</td>
</tr>
</table>
<p style="color:#85808e; font-size:14px; text-align:center">Data Protection: We will not pass your details on to any third party or send you unsolicited mail. If you would like<br/>
to unsubscribe from this and any future mailings please unsubscribe here.<br/><br/>markettiers4dc trading as Opinion Matters. Registered office: Northburgh House, 10a Northburgh Street,<br/>London, EC1V 0AT. Registered in England & Wales No. 4308785 VAT number 783 037 913. CIPR Partner, ISO<br/>9001:2000 registered (Certificate Number GB7041)</p>
</body>
Now used to img tag with valign="top"
<img src="xyz.png" valign="top" />
as like this
<table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td VALIGN="bottom">
<img src="http://i.imgur.com/vyJu43v.png" valign="top">
</td>
<td VALIGN="bottom">
<img src="http://i.imgur.com/vSAgEXE.png" valign="top">
</td>
<td VALIGN="bottom">
<img src="http://i.imgur.com/Ih5jtiC.png" valign="top">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0">
<tr>
<td rowspan="4" VALIGN = "top">
<img src="http://i.imgur.com/9B9Wcit.png">
</td>
<td>
<p style="font-family:arial; color:#002d62;">The new Insight Snapshot newsletter from Opinion Matters is packed full of research<br/>and communication ideas to inform your next project. Featuring tips for data<br/>storytelling, ways to interact with your target audience through online quizzes and<br/>case study examples of recent international survey campaigns.</p>
<p style="font-family:arial; color:#002d62">Read online here or request a printed copy</p>
</td>
<td rowspan="4" VALIGN = "top">
<img src="http://i.imgur.com/lNwkYpL.png">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/79k0VgK.png">
</td>
</tr>
<tr height="70">
<td height="70">
<p style="font-family:arial; color:#002d62;">If you would like to speak to a member of the team regarding any of the features in<br/>the newsletter please call 0207 251 9960 or email newsletter#opinionmatters.com</p>
</td>
</tr>
<tr>
<td VALIGN = "bottom">
<img src="http://i.imgur.com/brGmdjG.png">
</td>
</tr>
</table>
<p style="color:#85808e; font-size:14px; text-align:center">Data Protection: We will not pass your details on to any third party or send you unsolicited mail. If you would like<br/>
to unsubscribe from this and any future mailings please unsubscribe here.<br/><br/>markettiers4dc trading as Opinion Matters. Registered office: Northburgh House, 10a Northburgh Street,<br/>London, EC1V 0AT. Registered in England & Wales No. 4308785 VAT number 783 037 913. CIPR Partner, ISO<br/>9001:2000 registered (Certificate Number GB7041)</p>
What is Vertical Align
have you tried using margin-top:-5px for second table , i think this should remove the space .
how can i get the images and the content to the right to top align?
i tried valign="top" as you can see.
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="top"><img alt="" style="border: 0px solid;" src="/Portals/0/affiliates/NFL.png" /></td>
<td valign="top"> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL</span><br />
</strong><span class="body_copy" valign="top">The official website for the National Football League. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_players_association.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Players Association</span><br />
</strong><span class="body_copy" valign="top">"We, The National Football League Players Association ... Pay homage to our predecessors for their courage, sacrifice, and vision; ... Pledge to preserve and enhance the democratic involvement of our members; ... Confirm our willingness to do whatever is necessary for the betterment of our membership - To preserve our gains and achieve those goals not yet attained." Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_play_benfits.png" /></td>
<td><strong> </strong></td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Player Benefits</span></strong><br />
<span class="body_copy">A Complete guide to the benefits available for NFL players. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_hall_fame.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">Pro football Hall of Fame</span></strong><br />
<span class="body_copy">The Mission of the Pro Football Hall of Fame is: To honor, preserve, educate and promote. Learn more >></span><br />
</td>
</tr>
</tbody>
</table>
Some CSS :
table td, table td * {
vertical-align: top;
}
<TABLE COLS="3" border="0" cellspacing="0" cellpadding="0">
<TR style="vertical-align:top">
<TD>
<!-- The log text-box -->
<div style="height:800px; width:240px; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
Log:
</div>
</TD>
<TD>
<!-- The 2nd column -->
</TD>
<TD>
<!-- The 3rd column -->
</TD>
</TR>
</TABLE>