So I recently decided to download a HTML template for my site, after downloading it and setting it up it was going well, but text goes to the bottom rather than where I want it to go, here's some screenshots
http://imgur.com/VU8qDtf - That big empty box is where I want the text to go
http://imgur.com/05XfQKk - That is where the text actually goes
I'm new to HTML so excuse my noobness, but I did really well before running into this.
Here's the text code
<center><h2>Updates</h2></center>
<p style="color:white; font-size: 0.8em"> 20 September 2014 - You can now earn gold by working.</p>
<p style="color:white; font-size: 0.8em">20 September 2014 - Username now displays in the navigation pane.</p>
<p style="color:white; font-size: 0.8em">20 September 2014 - Your Stats page now fully functional.</p>
<p style="color:white; font-size: 0.8em">19 September 2014 - Added new registration page with increased security and validation.</p>
<p style="color:white; font-size: 0.8em">19 September 2014 - Removed login box from every page after logging in.</p>
<p style="color:white; font-size: 0.8em">19 September 2014 - Gold now a resource.</p>
<p style="color:white; font-size: 0.8em">19 September 2014 - Incorrect login now displays an error message</p>
<p style="color:white; font-size: 0.8em" >19 September 2014 - Added Rankings, Your Stats and Earn Gold pages. Not functional at the moment but will be as soon as possible.</p>
<p>Back to main page</p>
That is all on a seperate page, I have the rest (background and stuff) saved as header.php, let me know if you need that
Entire template code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Free Layout(from Dandon.net)</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body topmargin="0" bottommargin="0" style="background-color: rgb(0, 0, 0);">
<center>
<table heigh="" cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td colspan="2" background="images/lbar.png" height="500" width="38"></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" height="631">
<tbody>
<tr>
<td valign="top"><img src="images/banner.jpg"></td>
</tr>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" height="450">
<tbody>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td background="images/nav.png" height="17" width="178">
<div style="color:white" align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="-1">Main</font></div>
</td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="-1"> » Home<br>
» Your stats<br>
» Units<br>
» Rankings<br>
» Online players<br>
» Updates<br>
» Logout<br>
</font></td>
</tr>
<tr>
<td background="images/nav.png" height="17" width="178">
<div style="color:white" align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="-1">Social</font></div>
</td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="-1"> » Chatroom<br>
» Forum<br>
</font></td>
</tr>
</tbody>
</table>
</td>
<td background="images/divider.png" width="11"></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" height="460" width="535">
<tbody>
<tr>
<td background="images/content.png" height="17" width="535">
<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="-1"></font></div>
</td>
</tr>
<tr>
<td valign="top"><font color="#ff9900" face="Verdana, Arial, Helvetica, sans-serif" size="-1"> </font></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="bottom"><img src="images/footer.png"></td>
</tr>
</tbody>
</table>
</td>
<td colspan="2" background="images/rbar.png" height="500" width="38"></td>
</tr>
</tbody>
</table>
</center>
<div style="color:white; font-size: 0.8em; text-align: center; margin-top: 1em; margin-bottom: 1em;">
Design provided by <a href="http://www.freewebtemplates.com/">Free
Web Templates</a> - your source for free website templates<br>
Supported by Hosting24.com
</div>
</body></html>
You should probably remove the inline styling, add some classes and use text-align:center to center out your Updates feed. See fiddle: http://jsfiddle.net/hyfwgx5g/4/
EDIT: So here's the fiddle: http://jsfiddle.net/hyfwgx5g/6/ .
I wasn't sure if your updates feed is in a separate file or if you're manually adding it into the page. I've added a class updates-container to the table cell in which your code should live. Simply add it there, or like I said if you're importing a file add it using the include tag (for example <?php include 'updates.php';?> ).
Related
I have created a custom HTML email signature that renders fine in my Apple Mail client
but when bringing it into MS Outlook on a PC it renders with unintended line breaks and an enlarged image.
What could be causing the line to break in Outlook and not Apple Mail? Is there a "safeguard" parameter of some sort I could add to make it compatible with both? I'm really new to HTML.
<html>
<STYLE>
A {
text-decoration: none;
}
</STYLE>
<body>
<table width="500%" height="48" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" style="width:69px; height: 50px;" src="https://tetonsports.imagerelay.com/ql/015ce962f5e74fbfb86292c6b6e60ea8/email-icon-01.png">
</td>
<td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:14px;color: #000001;">
<tr>
<td>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
TETON Sports
</div>
</td>
</tr>
<tr>
<td style="padding: 0px 0;">
<div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
<b> Josh Jorgensen </b>
<span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
<span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Photographer</i> </span>
</div>
</td>
</tr>
<tr>
<td>
<span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><i>josh#tetonsports.com</i></span>
</td>
</tr>
</table>
</td>
<br>
<br>
</tr>
</table>
<br style=“ line-height:200px;”>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#ffffff;">
...
</div>
<span> </span>
</td>
</tr>
</table>
</body>
</html>
In your table, you are setting your table's width to 500%, while the image's width is in pixels.
So when your window is smaller, your entire table gets smaller but your image stays the same size, eating up space from the text section.
Consider being consistent across the board, and using either only percentages or only pixels for your widths.
In the email signature I'm making for my company I have an embedded image on the left. When I preview the code in Chrome or my IDE the image is sized properly taking up the same height as the three lines of evenly-spaced text to its right. However, when others in my company receive emails from me, sometimes the image is significantly taller than the lines of text next to it. How do I ensure that my image stays a consistent size across devices and email clients?
<html>
<STYLE>A {text-decoration: none;} </STYLE><body>
<table data-mysignature-date="2019-09-17T19:52:14.752Z" data-mysignature-is-paid="0" width="500" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td
valign="center" width="0" style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" width="100" style="width:67px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
</td>
<td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:90%;color: #000001;">
<tr>
<td>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
[COMPANY NAME]
</div>
</td>
</tr>
<tr>
<td style="padding: 0px 0;">
<div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
<b> Austin Berenyi </b>
<span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
<span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Graphic Designer</i> </span>
</div>
</td>
</tr>
<tr>
<td>
<span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><i>austin#company.com</i></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
It may sounds naive, but just try to specify height of your img:
<img alt="TETON Sports" style="width:67px; height: 48px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
In addition try to always set font-size of text (px or em) and try to avoid these values as percents.
I have created this email layout below, and cannot for the life of me figure out why Gmail renders it correctly, but Inbox renders it horribly.
Upon inspection, it is for some reason separating a bunch of stuff into their own table elements. Anyone see something I'm missing. I'm very new to html for email, and am constantly shocked at how bad it can be.
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center"><span style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;">shift</span><span style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;">Swap</span></td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td>
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="padding: 35px;">
<h3>
Welcome <span style="text-decoration: none;"><%= #email %></span>!
</h3>
<div>
<span style="display: block;">You can confirm your account email through the link below:</span>
<br>
Confirm your account
<br>
<span style="display: block;">Or paste the following into the address bar: <%= confirmation_url(#resource, confirmation_token: #token) %></span>
<h3 style="padding-top: 20px;">Thanks for signing up. We're looking forward to seeing you on the site!</h3>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center"><td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td></tr>
</table>
</td>
</tr>
</table>
</body>
Here is what it looks like when Inbox for some reason hides the entire message, which seems to happen when I send a "reconfirm" message:
And Gmail:
I really recommend to take out all non table elements, since even if it is 2016, mail clients are way behind
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0">
shift
</td>
<td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0">
Swap
</td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td style="padding: 35px;background: #FFF">
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="text-decoration: none; font-size: 22px">
Welcome
# email !
</td>
</tr>
<tr>
<td style="padding-top: 20px; font-size: 22px">
You can confirm your account email through the link below:
</td>
</tr>
<tr>
<td>
Confirm your account
</td>
</tr>
<tr>
<td>
Or paste the following into the address bar:
confirmation_url
</td>
</tr>
<tr>
<td style="padding: 20px 0; font-size: 22px">
Thanks for signing up. We're looking forward to seeing you on the site!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center">
<td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©
<%=T ime.new.year %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Knowing how "fussy" e-mail clients are, there's one thing that I see that may be causing unpredictable results. It's a long-shot that this will fix anything other than a typing error; but within that line of code, do you see what I see near 'color: 2b2b2b'?
<td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td>
The semi-colon is outside of the style attribute. Prolley just a foul ball, but you never know. ;)
i wrote email signature for Outlook and Thunderbird. My problem is in signature and space line between "Digital Print" and "Bo Kalako! s.r.o.".
Email from Thunderbird with space <br /><p></p> dosent work and text is without space in line. Pleas give mi tip or help. Many thanks!
http://jsfiddle.net/k2hzw78y/
or
<font style="font-family:'Arial', sans-serif; font-size: 10pt; color:#333;">S pozdravem</font><br><br><br>
<font style="font-family:'Arial', sans-serif; font-size: 10pt; color:#333;">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" rowspan="2" style="border-right: 1px solid #333333;"><img src="http://www.caj.jecool.net/wp-content/uploads/2015/11/Logo_Testorange.png" width="253" height="78" border="0"></td><td width="15"></td>
<td colspan="6"><font style="font-weight:bolder; color:FF6600; font-size:11pt;">Karel Holina</font><br /><font style="color:FF6600D; font-size:10pt; font-weight:;">Digital Print</font>
<br /><p></p>
<font style="color:#1F497D; font-size:10pt;">Bo Kalako! s.r.o.<br> <font style="color:#333;font-weight:; font-size:10pt;">adress: Komen 601/13, 500 02 Big City
</a><br> <br<font style="color:#333;font-weight:; font-size:10pt;">mobil: +490 623 980 130</a><br><font style="color:#333;font-weight:; font-size:10pt;">e-mail: john.lou#bo-kalako.com</a><br> www.bo-kalako.com</font>
</td>
</tr>
<tr>
<td width="8"></td>
</table></font>
What if you put two BR instead of one BR and one paragraph?
<font style="font-family:'Arial', sans-serif; font-size: 10pt; color:#333;">S pozdravem</font><br><br><br>
<font style="font-family:'Arial', sans-serif; font-size: 10pt; color:#333;">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" rowspan="2" style="border-right: 1px solid #333333;"><img src="http://www.caj.jecool.net/wp-content/uploads/2015/11/Logo_Testorange.png" width="253" height="78" border="0"></td><td width="15"></td>
<td colspan="6"><font style="font-weight:bolder; color:FF6600; font-size:11pt;">Karel Holina</font><br /><font style="color:FF6600D; font-size:10pt; font-weight:;">Digital Print</font>
<br /><br />
<font style="color:#1F497D; font-size:10pt;">Bo Kalako! s.r.o.<br> <font style="color:#333;font-weight:; font-size:10pt;">adress: Komen 601/13, 500 02 Big City
</a><br> <br><font style="color:#333;font-weight:; font-size:10pt;">mobil: +490 623 980 130</a><br><font style="color:#333;font-weight:; font-size:10pt;">e-mail: john.lou#bo-kalako.com</a><br> www.bo-kalako.com</font>
</td>
</tr>
<tr>
<td width="8"></td>
</table></font>
This works fine in normal clients but as we know Outlook is a pain to work with. It looks ok to me but can someone tell me why this would not render in Outlook?
<table id="contentArea">
<tr>
<td>
<p>Welcome to the TeraTitan family ${user['FirstName']},</p>
<p>Please tell us which services you are interested in currently:</p>
<table align="center">
<tr align="center">
<td><img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</p></td>
<td><img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</p></td>
<td><img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</p></td>
</tr>
</table>
<p>You can also visit us on-line at TeraTitan, or call us with any questions you may have at 800-555-1212.</p>
</td>
</tr>
</table>
<!-- End Table for content-->
I'm with R Lacome. What exactly is the rendering issue?
Also, there seems to be a few "sloppy" coding things. Sometimes this doesn't make a difference, but if your code is "sloppy" you won't know where your real issue is.
Below is cleaned up HTML with a few tweaks. Try running that and see if it fixes your rendering issue.
I should also note that without a lot of inline CSS <p> tags don't offer a lot of consistency in email clients.
<table id="contentArea" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<p>Welcome to the TeraTitan family ${user['FirstName']},</p>
<p>Please tell us which services you are interested in currently:</p>
</td>
</tr>
<tr>
<td align="left">
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<a href="http://www.teratitan.com/info/mortgage">
<img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg">
<p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</p>
</a>
</td>
<td align="center">
<a href="http://www.teratitan.com/info/savings">
<img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9">
<p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</p>
</a>
</td>
<td align="center">
<a href="http://www.teratitan.com/info/homeequity">
<img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg">
<p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</p>
</a>
</td>
</tr>
</table>
</td>
</td>
<tr>
<td align="left">
</td>
</tr>
<tr>
<td align="left">
<p>You can also visit us on-line at TeraTitan, or call us with any questions you may have at 800-555-1212.</p>
</td>
</tr>
</table>
<!-- End Table for content-->