I am trying to place a canvas inside the left table cell in the code below, but it always plots below the table. (I am an ancient C programmer, new to HTML and using Kompozer to create the table). I apologize for the stupidity of this question - I have attempted numerous Google searches and scanned through multiple Canvas PDFs without success.
...
<meta charset="utf-8">
<title>Simple Canvas Game</title>
</head>
<body>
<table style="text-align: left; width: 982px; height: 604px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 748px;"><br>
<canvas id="samplecanvas" width="512" height="300"> This text is
displayed if your browser does not support HTML5 Canvas. </canvas>
</td>
<td style="vertical-align: top; width: 214px;"><br>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I know I'm missing something simple, but working on a responsive email and cannot get the links to format properly with css
I've tried creating a class and assigning it, the same thing. Tried spans etc. I've never been too bright with CSS. Thanks.
I have been at it for a little bit trying different types that I could find and am probably just going a little crazy since I don't primarily code and I'm working on a responsive email layout.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
#media only screen and (max-width: 480px){
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent .leftColumnContent a {
font-family: Lato, Arial, Helvetica, sans-serif;
text-decoration: none;
}
img.header {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="800" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer"><!-- Deal 1-->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" width="380" style="max-width:380px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
Sengled Pulse LED Smart Bulb with JBL Bluetooth Speaker (2-Pack)
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer"><!-- Deal 2 -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" width="380" style="max-width:380px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<a href="#" >Apple iPad 3 Retina Bundle with Case and Screen Protector (32GB)</a>
</td>
</tr>
</table>
</td>
</tr>
<body>
</body>
</html>
You'll need a rule that looks like:
a {
color: preferred-link-color;
}
This will affect all <a> elements in your document.
And since it's an email you may want to inline the styles to boot! I believe gmail/Android clients strip out <style> tags. There are services for this, so you can do it efficiently.
Ok, so I'm trying to create a simple as you like single column html email template.
The issue that I'm having is that I can not seem to get rid of the white boarder that surrounds the message when I paste the html code into my email client to sent a test message.
I've set the css of the bodyto an inline and this works perfectly when I test in the browser, there is no white boarder or margin....
<body style="margin: 0px; padding: 0px; background-color: #000000" bgcolor="#000000">
....but when I come to paste the code into the mail client (I use Mac Mail as my default) to send a test mail, I keep getting a white boarder all around the message and CAN NOT work out how to get rid of this.
I've looked at an html email that I received with full width background color and tried to work out what that does that I'm not but can't see anything different, so am I just missing something real simple here??
<html>
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
</head>
<body style="margin: 0px; padding: 0px;" bgcolor="000">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrapper" bgcolor="#999999" border-collapse="collapse">
<tr>
<td align="center">
<table width="100%" height="200" bgcolor="#ffffff;" class="respon_table" style="max-width: 650px; padding: 10px;">
<tr>
<td style="background-color: #ffffff;">Email content goes here....</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/q16jgdtr/
You've misspelled bgcolor attributes. It should be a valid color.
E. g. bgcolor="#ffffff;" should be bgcolor="#ffffff" -- without a semicolon.
And bgcolor="000" should be bgcolor="#000000".
https://jsfiddle.net/q16jgdtr/3/
https://www.w3.org/TR/html4/index/attributes.html
I have a feeling it's because you missed the following on the table that contains the contents of the email.
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrapper" bgcolor="#999999" border-collapse="collapse">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="200" bgcolor="#ffffff;" class="respon_table" style="max-width: 650px; padding: 10px;" border-collapse="collapse">
<tr>
<td style="background-color: #ffffff;">Email content goes here....</td>
</tr>
</table>
</td>
</tr>
</table>
I have added border collapse, cellpadding, cellspacing and border to zero. Give the above code a try, hope that's what you are looking for.
Yes, almost everyone hates creating emails in Outlook (Android is almost as bad with Gmail and such). But, most of us are whingeing about getting rid of borders and I am whingeing about a border that does not want to work in Outlook '07, '10 & '13 (the usual suspects). Here is the code. It works everywhere...perfectly. Beautifully. Exquisitely. I have seen no one deal with a missing border. Can you help me, please...Godfather?
<table bgcolor="#ffffff" width="594" border="3" align="center" cellpadding="0" cellspacing="0" style="box-sizing: border-box; border: #b29d6c 3px solid;" class="deviceWidth">
Without knowing the entirety of your code, I cannot give you any other suggestions but will provide some proof that the code I am providing (see below) should work for the Outlook version that you are experiencing issues with.
Outlook 2007
http://i.imgur.com/tbVafPl.png
Outlook 2011
http://i.imgur.com/W1tvXSk.png
Outlook 2013
http://i.imgur.com/PvLAj3T.png
I have tested the code that you have provide. Here is a sample code that I put together that include your code at the very top. Notice that in all of the screen grabs above, setting your border properties does in fact work. There could be other issues within the entirety of your HTML.
Sample Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0px;outline: none;padding: 0px;width: 100%;background-color: #EFEFEF;background: #EFEFEF;">
<div style="margin: 0px;outline: none;padding: 0px;width: 100%;background-color: #EFEFEF;background: #EFEFEF;font-family:arial,sans;font-size:15px;color:#555555;text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="100%" style="font-family:arial,sans;font-size:15px;color:#555555;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#EFEFEF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="650" valign="top" align="left" style="padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:left;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#ffffff" border="3" style="border: #b29d6c 3px solid;min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="650" valign="top" align="center" style="padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:center;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
This example sets the border styling on the table tag, not the table cell
</td>
</tr>
</table>
<br><br><br><br>
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#FFFFFF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="650" valign="top" align="center" style="border: #b29d6c 3px solid;padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:center;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
Has the CSS border properties set on the table cell
</td>
</tr>
</table>
<br><br><br><br>
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#FFFFFF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="100%" valign="top" align="center" style="background-color:#b29d6c;padding:3px;">
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#EFEFEF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="100%" valign="top" align="center" style="padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:center;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
This technique uses an outter table with the background color of the border and a padding set to 3 pixel to mimic the borders around the text block.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
i have 6 social media icons for a footer of an e-mail. Is it possible to make this responsive for phones so the social media icons go from 6 to 3 in one row?
I have tried to use both divs and tables with bootstrap but both are displaying incorrectly. I would prefer tables as they work with outlook e-mail.
Bootstrap code:
<td class="col-xs-4 col-sm-4 col-md-2">
You can put each set of 3 icons into separate columns which stack on xs.
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
Edit: Since this is for Outlook, Bootstrap will not play nicely with it. More info can be found here: Has anyone gotten HTML emails working with Twitter Bootstrap?
Would something like this work for you?
As an exmaple; this uses a media query, so that when the device width is below a certain size it resizes any 640px widths to 320px and then applies the "wrap" (wr) and "float" (fl) classes to wrap the columns beneath eachother.
If you take the HTML and stick it in Chrome of Firefox and resize the window you can see how it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>none</title>
<style type="text/css">
#media only screen and (max-width: 580px){
*[class].wr{ display:block !important; }
*[class].fl{ float:left !important; }
*[class].w320{ width:320px !important; }
</style>
</head>
<body style="padding:0px; margin:0PX;" bgcolor="#DEDEDE">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#DEDEDE" style="table-layout:fixed; margin:0 auto;">
<tr>
<td width="100%" align="center" valign="top" bgcolor="#DEDEDE">
<!--Table to wrap email-->
<!--Table with images in-->
<table width="640" border="0" cellpadding="0" cellspacing="0" class="w320">
<tr class="wr">
<!--Top row-->
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ffcc00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ccff00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#00ffcc"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End top row-->
<!--Bottom row-->
<td class="fl wr">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#3377ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ff3377"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#7733ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End bottom row-->
</tr>
</table>
<!--End table with images in-->
<!--End of table to wrap email-->
</td>
</tr>
</table>
</body>
</html>
Note: This works across iPhone, Android 2.3 and 4.2. Problems occur in Android 4.4 kitkat but there is a workaround for it.
The way to do it so it works everywhere (outlook and all android included is with floated tables:
CSS:
#media only screen and (max-width: 480px) {
*[class*="drop"] { float:none!important; clear:both!important; width:100%!important; padding:0!important; display:block!important; }
}
HTML:
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="left">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
<!--[if mso]></td>
<td align="left" valign="top" width="50%"><![endif]-->
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="right">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
</td>
The table widths would need to be changed to suit your email width so they equal 50% of it.
You will notice the commented closing and opening td in the middle - this is an outlook condition, so for outlook only there will be a td wrapping each table.
If your tables don't need to be exactly 50% (as in there is padding between them) then you can leave out the outlook comment and just size your tables smaller than 50%, and make sure 1 is floted left and the other is floated right, leaving the gap between them that you need as padding. So long as this gap is more than about 10px, it should work in outlook.
Also be aware of your table structure when you use this outlook comment. If this is used in a table with more rows, you will get column span issues in outlook, as this row with have an extra column in outlook. Best to nest a fresh table inside a td before using this outlook fix.
Also note that the float is specified on the tables using the align attribute. This is to accommodate the older versions of outlook that don't recognize the css property float.
While creating an html email for Outlook, I stumbled upon a small problem that I have not been able to fix.
Below is a screen shot of an html table. I need to make the whole area clickable and not just the text. When I put <a href="#"> around the <td> or <table> it works in browsers but not in Outlook.
Here is the code:
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
Yes please, send me a quote.
</td>
</tr>
</tbody>
</table>
I know this is an old question, but I was looking for an answer to this problem (clickable whole buttons in Outlook) and stumbled upon the following solution:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="middle" >
<!-- start of Outlook compatible button generated by http://buttons.cm/ -->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://yoururlhere.com/" style="height:52px;v-text-anchor:middle;width:330px;" arcsize="10%" stroke="f" fillcolor="#2fba45">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://yoururlhere.com/"
style="background-color:#2fba45;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:52px;text-align:center;text-decoration:none;width:330px;-webkit-text-size-adjust:none;">Yes please, send me a quote.</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
<!-- end of Outlook compatible button generated by http://buttons.cm/ -->
</td>
</tr>
</tbody>
</table>
Note I have not tested the above code.
Other answers did link to the campaignmonitor website, but not this link which provided the solution.
That blog post at campaignmonitor mentions that they have created a specific website to generate outlook compatible clickable buttons - http://buttons.cm based on a solution created by Stig M (#stigm on twitter).
I do not work for campaignmonitor.
Hope that helps someone.
try this
http://jsfiddle.net/KrRzP/
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; cursor:pointer;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
Yes please, send me a quote.
</td>
</tr>
</tbody>
</table>
You can try to use the onClick, <td onClick="go to anchor">. In the inline style you should add cursor: pointer so the cursor is changed to the 'hover a link'-pointer.
Try removing the target="_self". As Outlook is a email client, it probably doesn't recognize it and may be causing the issue.
On a side note, If you are using anchor links within your email (linking elsewhere on the same page), this is not fully supported in all email browsers. Here is the support chart
Use JavaScript "innerHTML" property. By default, in HTML5 you cannot directly add an anchor tag in a table cell element.
<html>
<title>
</title>
<head>
</head>
<body>
<table>
<thead>
<tr>
<td>Youtube</td>
<td id="assign_anchor_tag_here"></td>
</tr>
<thead>
</table>
<script>
var td_element = document.getElementById("assign_anchor_tag_here");
td_element.innerHTML = "<a href='https://www.youtube.com'>Click Here!</a>";
</script>