I'm hoping someone can help me with this. I have tried everything I know and read all the articles I could find. Nothing has worked
Basically, there is what seems to be a neon blue background color showing up ONLY on Gmail in the <td> containing the header image.
Screenshot (with image missing):
Screenshot (with image showing neon background):
Table code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="=FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
I have specified background colour white in the table and td. I have also added style attributes to the border to the href and img tags. None of these have worked.
The classes container and container1 both contain:
border-width:0 none;
background: #ffffff;
text-decoration: none;
text-decoration-color: #ffffff;
Even when I unlinked the header image and sent another test, the blue was there!
I think you added an equal rather than a hash in background color decoration for the td. You have bgcolor="=FFFFFF" instead of bgcolor="#FFFFFF". Below is the fixed code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="#FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
Cheers
Related
I have no basic clue about html and and right now am kinda stuck, I need two images side by side around the bottom half part of a email template, thing is no matter what I do I can't get the image to be side by side. there is already a hero image on the email template I am not sure if that's what causing the error. Can you please help me with this or give me some learning metrials so that I can figure this out.
Can you please help me with this or give me some learning metrials so that I can figure this out.
PS: Please don't mind the rickroll video, I added it to replace the link
The below code is how the banner hero image is setup
<tr>
<td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
<a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
<img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
</a>
</td>
</tr>
Use a <table>, it should be compatible with Outlook email client as well. For more on HTML email see this article.
<table>
<tr>
<td>
<a href="#">
<img src="https://placem.at/places?w=160&h=90&random=1&txt=1&txtclr=fc0">
</a>
</td>
<td>
<a href="#">
<img src="https://placem.at/places?w=160&h=90&random=1&txt=2&txtclr=fc0">
</a>
</td>
</tr>
</table>
You can do it by several ways. The easiest is use another table in td with two columns, like this:
<tr>
<td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
<a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
<img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
</a>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<a href="#">
<img src="#">
</a>
</td>
<td>
<a href="#">
<img src="#">
</a>
</td>
</tr>
</table>
</td>
</tr>
Don't forget to let me know if it works for you or not.
I would recommend using the display: flex; property, which automatically makes the flow of the content inside a container to a row.
<div style="display: flex;">
<img src="example.com" />
<img src="example.com" />
</div>
I've been developing a website with a friend and I have a little problem.
We need to set our footer manually in the page with position:relative and margin-top to fix it because it isn't following the last <tr< end.
I've been trying to fix this problem around 3 weeks and I'm really frustrated with this...
The "footer" <tr> is following the "right-column" <tr>, but even I if I try to remove it, it tries to get aligned with a tr in the top of the page instead of the "container" <tr>
I'm posting the last lines of the code here, but since I have no idea of what is causing this, I'm sending below the website link itself.
My website is onlinewinxclub.com/centro-web/test.php
<tr id="container">
<td id="container_left_column">
<div style="position: relative; margin-top: 11px; margin-left: 15px;">
<iframe id="ranking_iframe" scrolling="no" frameborder="0" src="pages/Iframes/Access_guests.php"></iframe>
</div>
</td>
<td id="container_middle_column" style="vertical-align: top;">
<table id="content_videobox" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr style="">
<td id="content_videobox_firstcolumn" rowspan="3">
<div id="content_videobox_iframe" frameborder="0" allowfullscreen="" volume="0"><video
class="file" preload="metadata"
poster="././medias/images/Video_Thumbs/happy2021thumb.png"
src="././medias/videos/Happy_2021.mp4" data-overlay="1"></video></div>
</td>
<td id="content_videobox_secondcolumn">
<h2>
<span class="video-title" id="content_videobox_videotitle"
style="text-shadow: 1px 0px 0px #560027;">Happy New Year!</span>
</h2>
<p style="position:relative; top: 150px;">
<span class="video-description" id="content_videobox_videotext"
style="text-shadow: 1px 0px 0px #560027;">2021 arrived. Your favorite Winx fairies and
specialists are hoping it will be better than the last one. The witches? Not
sure.</span>
</p>
</td>
</tr>
<tr style="">
<td id="content_videobox_firstcolumn2">
</td>
</tr>
<tr style="">
<img onclick="javascript:Previous();" class="previous"
style="position: relative; top: 274px; left: 541px; cursor: pointer;"
src="././medias/images/arrow_left.png"
onmouseover="this.src='././medias/images/arrow_left_hover.png';"
onmouseout="this.src='././medias/images/arrow_left.png';">
<img onclick="javascript:Next();" class="next"
style="position: relative; top: 274px; left: 625px; cursor: pointer;"
src="././medias/images/arrow_right.png"
onmouseover="this.src='././medias/images/arrow_right_hover.png';"
onmouseout="this.src='././medias/images/arrow_right.png';">
<td id="content_videobox_secondcolumn2" style="text-align: center">
<span class="video-number"
style="color: white; font-family: Arial; font-size: 20px; height: bold; text-shadow: 1px 0px 0px #560027;">
1/4 </span>
</td>
</tr>
</tbody>
</table>
<div id="content_mininews_frame">
<iframe id="content_mininews_iframe" frameborder="0" src="pages/Mininews/NewsContentV2.php">Browser not
compatible.</iframe>
</div>
</td>
</tr>
<tr>
<td id="container_right_column" style="vertical-align: top;">
<div id="content_horoscope_iframe">
<iframe id="content_horoscope_iframe" frameborder="0" src="pages/Tips.php" data-ruffle-polyfilled="">Browser
not compatible.</iframe>
</div>
<iframe style="position: relative;width: 703px;height: 219px;margin-left: -467px;margin-top: -91px;"
frameborder="0" src="pages/Iframes/Download.php" data-ruffle-polyfilled="">Browser not compatible!</iframe>
</td>
</tr>
<tr id="footer">
<td id="footer_content" colspan="2">
<hr style="margin-top: auto; position: relative;">
<div style="margin-top: auto; position: relative;">
<img id="footer_rainbow_img" src="././medias/images/rainbow_logo_small.jpg">
<p id="footer_text">Winx Club™ a series created and produced by Iginio Straffi and Rainbow S.r.l<br>
© 2011-2021 Winx Club Online - Unofficial WinxClub.com inspirated by the old official website
</p>
</div>
</td>
</tr>
first remove the
#container - position absolute
I think you are positioning it because of the iframe. why don't you add iframe with the .container_middle_column? you can add td and give a width or create new table inside the td, because you are using table. And make #footer - posision relative. If you use bootsrap it will be easy more than this.
I'm very new to HTML and have been trying to build a HTML signature, I've managed to get it to work in a number of email clients and look how I want but sometimes, for instance on iPhone and in Hotmail/Outlook the social media icons in the second cell move below the company logo. Is there something I have missed or can improve upon so that they stay inline with the rest of the signature?
Below is the current code - I probably have things in the code that either don't need to be there or seem a bit strange but this is best I've managed to achieve.
<div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
<tbody>
<tr>
<td>
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>
<td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
</td>
<div style="clear:both"></div>
Many thanks
If you mean to leave images in the same line you should use display : inline instead of display : block
<div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
<tbody>
<tr>
<td>
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>
<td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
</td>
<div style="clear:both"></div>
edit Updated codepen and litmus.
Try this. codepen. Looks the same in all litmus tests.
edit updated HTML
<div id="sig" style="min-width:400px;min-height:130px;max-width:600px;max-height:150px;padding:5px 0 0 5px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td rowspan="3">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" width="454" height="117" alt="Lozi Designs" border="0" style="display:block;"/>
</td>
<td valign="middle">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" border="0" style="display:block;"/>
</td>
</tr>
<tr>
<td valign="middle">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" border="0" style="display:block;">
</td>
</tr>
<tr>
<td valign="middle">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" border="0" style="display:block;">
</td>
</tr>
</table>
</div>
Be sure to validate your html code. You used table elements but didn't surround them with a <table> tag, there were more than one alt text given for the same images, and some of your quotes did not were not closed (not the width attribute below as an example).
Open:
width="122 height="122"
Closed:
width="122" height="122"
edit
I cleaned up some of the styles in the image (you didn't need to float the logo), and removed cellpadding/cellspacing by setting them to zero in the table element. I rechecked Litmus and the social media icons appear as I believe they should.
Try this:
<table>
<tr><td>
<div style="float:left;"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" style="width:100%;max-width:600px;"></div></td><td>
<div width="38px" style="display:inline;">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="100%" style="max-width:38px;"><br>
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="100%" style="max-width:38px;"><br>
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="100%" style="max-width:38px;"></div></td></tr></table>
It should be fully responsive for any email client or mobile device.
So I have this certain table. I know I'm not supposed to use table for layout, but in this case I'm forced to.
I need to style a specific TD's cell-spacing (the TD with the class .ritey). I know I have to target the TABLE to set its cell-spacing, but I don't want other TDs got affected. I only need to style this single TD.
Is there any way to do this?
Here is a quick rough sketch with MS Paint, I hope this explains what I need:
In the overall layout there will be multiple rows (multiple TR). In this question I only show one row. I need all columns (all TDs) to remain unchanged, except for .ritey. I want .ritey to have 10px margin around it (margin, not padding). I hope this explains better!
.
And here is what I got in my HTML. I tried td.ritey { border-spacing:10px; } but it does not seem to work.
<table width='100%' border='0' cellspacing='1' cellpadding='3' class='postable'>
<tr>
<td valign='middle' class='row4 uname' colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr><tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td><td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr></table>
Any help is really appreciated.
See fiddle for code and demo
fiddle: http://jsfiddle.net/kDKEw/2/
demo: http://jsfiddle.net/kDKEw/2/embedded/result/
HTML:
<table cellspacing="1" cellpadding="3" border="1" width="100%" class="postable">
<tbody><tr>
<td valign="middle" colspan="2" class="row4 uname">
<div class="name">
Guest
</div>
</td>
</tr><tr style="height: 36px;">
<td width="100%" valign="top" class="ritey" style="width: 90%; position: absolute; margin: 4px;">
<div class="postcolor">
Post content
</div>
</td><td valign="top" class="lefty" style="float: right; width: 6%;">
<div class="postdetails">
Details
</div>
</td>
</tr>
</tbody>
</table>
SS:
Updated Fiddle as per image illustration ( http://i.imgur.com/o56CD.png ): given by deathlock
Fiddle: http://jsfiddle.net/7xfxF/1/
Demo: http://jsfiddle.net/7xfxF/1/embedded/result/
SS:
In CSS, you would use padding for cellpadding and border-spacing for cellspacing. Here's the working code:
EDIT
I revised the CSS according to the image you provided. I added extra styling for the postcolor class. See the updated CSS and Fiddle. I also updated the screenshot.
If you want the borders to collapse, change border-collapse to collapse and remove the border-spacing property.
<style type="text/css">
table.postable {
border-collapse: separate !important;
border-spacing: 1px;
}
table.postable td {
border:1px solid black;
padding: 5px;
}
td.ritey {
border: 0px !important;
padding: 10px 5px 10px 5px !important;
}
td.lefty {
padding: 10px 5px 10px 5px !important;
}
div.postcolor {
margin: 3px;
padding: 10px;
border: 1px solid black;
}
</style>
<table width='100%' class='postable'>
<tr>
<td colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr>
<tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td>
<td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr>
</table>
OUTPUT:
See this jsFiddle for a demonstration.
What would be the best way to make a whole block of content clickable in an html email so that it also works in Outlook (2003, 2007, 2010).
For example, I have this Call-To-Action:
So far I've come up with this:
<table cellpadding="0" cellspacing="0" style="border: 1px #ffffff dashed;">
<!-- NAVIGATION AREA START -->
<tr>
<td width="370" style="font-family:'Times New Roman', Times, serif;font-size: 22px;font-weight:bold;line-height:52px;">
<div style="margin-left: 15px; margin-top: 0; margin-bottom: 0; height:100%;">
<a href="http://${servername}/" style="text-decoration:none;color:#fff;">
LEARN MORE ABOUT ABOUT THIS
</a>
</div>
</td>
<td width="160">
<table cellpadding="0" cellspacing="0" height="24">
<tr>
<td>
<div style="background-color:#fff; margin-top: 0; margin-bottom: 0;width:128px;height:24px;color: #000000;text-decoration: none;font-size: 12px;line-height: 24px;">
<a href="http://${servername}/" style="text-decoration:none;color:#000;margin-left: 5px;">
CLICK HERE
</a>
</div>
</td>
<td>
<img style="display: block;" width="13" height="24" border="0" alt="" title="" src="http://${servername}/images/mailing/arrow-white.png" />
</td>
</tr>
</table>
</td>
</tr>
<!-- NAVIGATION AREA END -->
</table>
The problem is that the whole area within the dashed border should be clickable. I tried wrapping the whole table with an a tag, but this doesn't work in Outlook or IE (it works in Firefox).
Or, consider this:
<table width="255" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border: 10px solid #fff;">
<tr>
<td valign="top" style="width:130px;padding-bottom: 15px; padding-top: 15px; padding-left: 15px;">
<p style="color:#ffffff;font-family:'Times New Roman', Times, serif;font-size: 16px;margin-top: 0; margin-bottom: 5px;">
<strong>FAQ</strong>
</p>
<p style="font-family: arial,sans-serif; font-size: 14px; color:#d0d0d0; line-height: 20px; margin-top: 0; margin-bottom: 0;">
Learn more about our services.
</p>
</td>
<td align="center" style="padding-bottom: 15px; padding-top: 15px;">
<p style="margin-top: 0;margin-bottom: 0;">
<img width="54" height="102" border="0" src="http://${servername}/images/mailing/questionmark.png" title="" alt="">
</p>
</td>
</tr>
</table>
Here too, the whole block (within the white border) should be clickable, not just the individual lines of text.
How would you go about this, considering the bad support for CSS in Outlook 2007/2010 (e.g. no display CSS-property)?
Bottom line: How to link a block level alement without being able to wrap it with a (tried with table and div) or using display: block;?
This answer will aim to show how all different options render in Outlook (2013), starting with the "best" solution found so far:
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
This will be rendered like this:
Or, with the link hitbox annotated:
Yeah, that sucks: you want the entire block to be clickable. Basically I'm here to tell you that the answer to the question "how to link block elements (outlook-compatible)" is: this is not possible, not without workarounds.
To support my claim (PS. I highly welcome anyone proving this claim wrong!), here's all the variations I've tried, with their respective renderings in Outlook. I've tried to include some solutions suggested in other answers too.
Here's the code I've used to generate e-mails:
<html>
<head>
<title>My e-mail</title>
</head>
<body>
<table width="660px" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 660px;">
<tr>
<td style="padding: 15px;">
<p>1. The "best" text-only version I've found:</p>
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
<hr />
<p>2a. Workaround using an image. Setting size through style attribute does not work.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" style="width: 100%; height: 30px;" />
</a>
<hr />
<p>2b. Workaround using an image. Kind of works, but requires an image of exactly correct size through attributes.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" width="640px" height="30px" />
</a>
<hr />
<p>3. Attempt to link the entire table. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
Go to some great website!
</td>
</tr></table>
</a>
<hr />
<p>5. Attempt to link the entire div. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<div style="background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</div>
</a>
<hr />
<p>6. Setting anchor tag to display as a block. Does not work.</p>
<a href="http://www.stackoverflow.com" style=" display: block; text-decoration: none; color: #333; background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</a>
<hr />
<p>6. Hacking with line-height, does not work.</p>
<div style="background-color: #ccc; text-align: center;">
<a href="http://www.stackoverflow.com" style="line-height: 3em; text-decoration: none; color: #333;">
<span style="vertical-align: middle;">Go to some great website!</span>
</a>
</div>
</td>
</tr>
</table>
</body>
</html>
And here's how they're rendered by Outlook 2013, annotated with the link hitbox:
Put an <a> in each of the fields. Not elegant, but this works.
If there is a field that is empty, just put a transparent image in there that's the right width and height. (image itself, not resized in html)
Personally I'd add the call to action as an image in the email and simply wrap it with an anchor tag.
<img src="http://myimage.com/image.png" alt="" />
Given that this is for an email, is there a reason you want to build up the call-to-action in HTML?
UPDATE
Alternatively you could do something like this:
http://jsfiddle.net/gv5aZ/
(Quick fiddle i've put together for you)
I've not tested this extensively but I did manage to get something working.
In you header styles and in the 'a href=""' add the below:
Header style:
#outlook a { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
Link inline style:
<a style="font-family: #; font-size: #px; text-decoration: #; border: #color #px #; color: #; padding-bottom: #px; padding-top: #px; padding-left: #px; display: inline-block; padding-right: #px; font-style: #;" href="#" target="_blank">Read more...</a>
Replace # with your styles of course except for the display property (leave that one in!)
Again, I haven't tested this extensively but for me it worked so don't miss anything out from what I've written here :)
EDIT: You might not have a border in your design so make it the same colour as your background
Why don't you just put an anchor around the table? Not entirely sure if it works in outlook though, but it's the easiest solution
<table>....</table>