I'm trying to build a newsletter for an email campaign. I have to build it with tables and all that cause most of the email clients ignore thinks like div etc. now I have the problem that I would like to have the text obertauern ...... in one line and under it the line ( <hr> ) but its not working the way I would like to have it.
On the pic you can see what I'm trying to do and I put the html into jsfiddle.
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<td colspan="2">
<img src="head.jpg" width="700" border="0">
</td>
<tr>
<td colspan="2">
<p style="color:#00668a;text-align:left;font-size:18px;">
Wer den Sonnenskilauf im SalzburgerLand noch intensiv genießen möchte, den erwarten strahlender Sonnenschein, bestens präparierte Pisten und sensationelle Urlaubsangebote:
</p></td>
</tr>
<tr style="background-color:#deeef4;">
<td width="130" cellpadding="0" ><p style="color:#00668a;padding:10px">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span></p><a href="http://urlaub.salzburgerland.com/de/winterurlaub?utm_campaign=RK_WI_13&utm_medium=DE&utm_source=CARE-Verlag&utm_content=Newsletter" target="_blank">
<img src="ab1.jpg" width="250" height="138" border="0" style="padding:10px"></a>
<td width="200" height="163"><p>"Sund and Fun Wochen"</p>
<ul>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
</ul><img src="button.png" width="345" height="35" border="0"></td></td>
</tr>
</table>
jsfiddle
just use the border property to create the line and change the p to a div so you do not put a lot of space after it:
<tr>
<td colspan="2">
<div style="border-top: solid 1px #00668a;height:1px;">
Here is a jFiddle:
http://jsfiddle.net/qXxPb/2/
Try:
<td width="600" cellpadding="0" >
For the td where the text is located (or use something else than 600).
I fixed your jFiddle: http://jsfiddle.net/mSLf4/5/
Should work like that, you missed some tablecells and I made your sentence in an extra row + set the cell to span over 2 cells.
Should work now, next time validate your code first please.
<td colspan="2">...</td>
was the important line.
Related
I am making a new signature for my email. Here is the code:
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
</style>
<table cellspacing="0" width="500" cellpadding="0" border="0" style="padding:20px 0 20px 0;">
<tr>
<td style="padding:0 9px 0 0;vertical-align: middle;" width="100" valign="top"> <img alt="Logo" width="100" style="width:100px;moz-border-radius:15%;khtml-border-radius:15%;o-border-radius:15%;webkit-border-radius:15%;ms-border-radius:15%;border-radius:15%;" src="https://i.ibb.co/FzTmBN9/testlogo.png" /> </td>
<td style="border-left:0px solid;vertical-align: top;border-color:#acacac;padding:0 0 0 0px;" valign="middle">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.6;font-family:'Open Sans','Verdana','Geneva',sans-serif;font-size:12px;color: #000000;letter-spacing:.8px;">
<tr>
<td> <span style="font: 12px 'Open Sans','Verdana','Geneva',sans-serif;color:#000000;">My Name</span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;color: #000000;"> </span> </td>
</tr>
<tr>
<td style="padding: 5px 0;">
<div style="font-family: 'Lato','Verdana','Geneva',sans-serif;font-size:11px;color: #000000;letter-spacing:1.2px;">My Company</div>
</td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 1: </span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7890</a></span> </td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 2: </span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7891</a></span> </td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">https:// </span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;">website.com</span> </td>
</tr>
</table>
</td>
</tr>
</table>
<span style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</span>
When I send myself a test email on my iPhone XS Max running iOS 13.5.1 it works well and displays like this:
But then if I rotate the phone horizontally it then does this:
And then when I turn it back to portrait mode it does this:
I am pretty sure this is a bug with the iOS mail app and not my code, however I want my signature to display well on any ordination. Why is this occurring? How can I fix this? I've tried adding in some breakes (<br>) and padding with no luck.
It's quite possible you need to put the span element within a table too. Alternatively, an easier option would be to use a paragraph tag instead of a span (make it a block element, not inline, in other words).
i.e.:
<p style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</p>
i am trying to click on 2nd item(Not Know) in the Td element. I was able to click on the 1st item(known Issue) by using its xpath. How ever i am not able to do the same thing with the 2nd option. i am getting following error
Unable to locate an element with the xpath expression
//*[#id='group_tree']/div/div/div/div[1]/div/div[1]/table/tbody/tr/td[[contains(text(), 'Not Known')]
because of the following error:
below is my code:
driver.findElement(By
.xpath("//*[#id='group_tree']/div/div/div/div[1]/div/div[1]/table/tbody/tr/td[[contains(text(), 'Not Known')]"));
and my HTML is
<div style="display: block;">
<div>
<table cellspacing="0px" cellpadding="0px"
style="background-color: transparent;">
<tbody>
<tr>
<td><img class="tree" src="images/s.gifx" alt=""
style="margin-left: 16px;"></td>
<td class="tree_spacer"><img alt="" src="images/nav_bult.gifx"></td>
<td title="" class="tree_item_text"><a
name="37fd8721a9729140d11a2c59127b17a6">Known issue</a><span></span></td>
</tr>
</tbody>
</table>
<div></div>
</div>
<div>
<table cellspacing="0px" cellpadding="0px"
style="background-color: transparent;">
<tbody>
<tr>
<td><img class="tree" src="images/s.gifx" alt=""
style="margin-left: 16px;"></td>
<td class="tree_spacer"><img alt="" src="images/nav_bult.gifx"></td>
<td title="" class="tree_item_text"><a
name="ea1e8721a9729140d11a2c59127b17fb">Not known</a><span></span></td>
</tr>
</tbody>
</table>
<div></div>
</div>
</div>
i tried finding the element by name, by xpath and contains but everything is throwng error
Please Help
Before doing anything first check if your html is valid, I verified that your html misses matching </img> tags for the existing <img> tags.
Now, I assume you want the td elements with Known issue and Not known as text for a elements.
The following xpaths will give you those :
//td[#class='tree_item_text' and ./a/text()='Known issue']
//td[#class='tree_item_text' and ./a/text()='Not known']
I have a page with two large tables, one positioned above the other:
http://files.sportsmogul.com/Encyclopedia/1907/BOS/index.html
In my editor (Dreamweaver CC 2015), there is no space between the tables.
But in Chrome, there is a unwanted gap of about 10 pixels (the blue space where the background shows through, between the top "navbar" and the rest of the page).
When you open 'Developer Tools' in Chrome, you see that Chrome has INSERTED a 'br' tag on-the-fly. (You can see the tag in the Developer Tools, but Chrome doesn't make any changes to my HTML file).
The first table closes on line 69.
The second table opens on line 71.
There is no code between these two tables (much less a 'BR').
However, Chrome inserts a 'BR' tag when displaying the file.
Why is Chrome doing this and how can I stop it?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>
1907 Boston Americans
</title>
<link href="../../styles.css" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">body {background-color: #606080; background-image: url(../../wallpaper.jpg)}</style>
<script type="text/JavaScript">
function MM_jumpMenu(targ,selObj,restore)
{
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<a name="top"></a>
<table class="basic" width="HTML_TABLE_WIDTH" align="center" cellpadding="0" cellspacing="0" background="../../navbar0.jpg" bgcolor="#ffffff">
<tr><td width="70" valign="top" style="PADDING-LEFT: 10px; PADDING-TOP: 10px"><table border="0" cellspacing="0" cellpadding="0">
<tr><td height="27" valign="bottom"><b class="title">Year: </b></td></tr>
<tr><td height="27" valign="bottom"><b class="title">Team: </b></td></tr>
</table></td>
<td style="PADDING-TOP: 7px"><table border="0" cellspacing="0" cellpadding="0">
<tr><td height="27" valign="top">
<form name="form1" id="form1">
<select name="menu1" class="navbar" onchange="MM_jumpMenu('parent',this,0)">
<option value="../../1901/BOS/index.html">1901</option>
<option value="../../1902/BOS/index.html">1902</option>
<option value="../../1903/BOS/index.html">1903</option>
<option value="../../1904/BOS/index.html">1904</option>
<option value="../../1905/BOS/index.html">1905</option>
<option value="../../1906/BOS/index.html">1906</option>
<option value="../../1907/BOS/index.html" selected>1907</option>
<option value="../../1908/BOS/index.html">1908</option>
<option value="../../BOS/index.html">All Years</option>
</select>
1906 | 1908
</form></td>
<td><span title="Show All Years"><img src="../../history.jpg" alt="All Years" width="28" height="22" border="0"></span></td>
</tr>
<tr><td height=27 valign="top">
<form name="form2" id="form2">
<select name="menu2" class="navbar" onchange="MM_jumpMenu('parent',this,0)">
<option value="../../1907/BOS/index.html" selected>Boston Americans</option>
<option value="../../1907/BSN/index.html">Boston Doves</option>
<option value="../../1907/BRO/index.html">Brooklyn Superbas</option>
<option value="../../1907/CHC/index.html">Chicago Cubs</option>
<option value="../../1907/CHW/index.html">Chicago White Sox</option>
<option value="../../1907/CIN/index.html">Cincinnati Reds</option>
<option value="../../1907/CLE/index.html">Cleveland Naps</option>
<option value="../../1907/DET/index.html">Detroit Tigers</option>
<option value="../../1907/NYG/index.html">New York Giants</option>
<option value="../../1907/NYY/index.html">New York Highlanders</option>
<option value="../../1907/PHA/index.html">Philadelphia Athletics</option>
<option value="../../1907/PHI/index.html">Philadelphia Phillies</option>
<option value="../../1907/PIT/index.html">Pittsburgh Pirates</option>
<option value="../../1907/SLB/index.html">St. Louis Browns</option>
<option value="../../1907/STL/index.html">St. Louis Cardinals</option>
<option value="../../1907/WSH/index.html">Washington Senators</option>
<option value="../../1907/index.html">All Teams</option>
</select></form></td>
<td><span title="Show All Teams"><img src="../../earth.jpg" alt="All Teams" width="28" height="22" border="0"></span></td>
</tr>
</table></td>
<td width="200"><img src="../../navbar1.jpg" border="0" alt="Home" width="200" height="76"></td>
<td width="198"><img src="../../navbar2g.jpg" border="0" alt="Leaders" width="198" height="76"></td>
<td width="198"><img src="../../navbar3.jpg" border="0" alt="Baseball Mogul" width="198" height="76"></td>
</tr>
</table>
<!-- Chrome inserts a BREAK (BR) here. -->
<table class="basic" width="HTML_TABLE_WIDTH" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="PADDING-RIGHT: 5px; PADDING-LEFT: 10px" align=center valign=top><BR>
<table class=table1 cellSpacing=0 cellPadding=0 width=310>
<tr class=tabletitle><td colspan="3">
<div align="center"><strong>1907 American League</strong></div></td></tr>
<tr class=header0>
<td width=195 class=ltl>Team</td>
<td width=60 class=ltc>Record</td>
<td width=55 class=ltc>GB</td></tr>
<tr><td class=lml>Detroit Tigers</td>
<td class=lmc>92 - 58</td>
<td class=lmc>—</td>
</tr>
<tr><td class=lml>Philadelphia Athletics</td>
<td class=lmc>88 - 57</td>
<td class=lmc>1.5</td>
</tr>
<tr><td class=lml>Chicago White Sox</td>
<td class=lmc>87 - 64</td>
<td class=lmc>5.5</td>
</tr>
<tr><td class=lml>Cleveland Naps</td>
<td class=lmc>85 - 67</td>
<td class=lmc>8.0</td>
</tr>
<tr><td class=lml>New York Highlanders</td>
<td class=lmc>70 - 78</td>
<td class=lmc>21.0</td>
</tr>
<tr><td class=lml>St. Louis Browns</td>
<td class=lmc>69 - 83</td>
<td class=lmc>24.0</td>
</tr>
<tr class=highlight2><td class=lml><B>Boston Americans</B></td>
<td class=lmc><B>59 - 90</B></td>
<td class=lmc>32.5</td>
</tr>
<tr><td class=lml>Washington Senators</td>
<td class=lmc>49 - 102</td>
<td class=lmc>43.5</td>
</tr>
</table></td>
<td style="PADDING-RIGHT: 10px; PADDING-LEFT: 5px" align=center valign=top><br>
<table class="table1" cellSpacing=0 cellPadding=0 width=310>
<tr class="tabletitle"><td>
<div align="center"><strong>7th (AL)</strong></div>
</td></tr>
<tr class=header><td></td></tr>
<tr><td class=lml>Runs Scored: 464</td></tr>
<tr class="highlight"><td class="lml">Runs Allowed: 558</td></tr>
<tr><td class="lml">Attendance: 436,777</td></tr>
</table></td>
</tr>
First of all there is a <br> immediately after the navbar table: http://i.imgur.com/qLGU3Du.png
Remove that and most of the space will go away. The leftover space is caused by the 'Home', 'Leaders', and 'created by' images in the navbar. The default alignment for inline elements such as those reserves some space underneath for letter descenders. You need to add a vertical-align: top style to each of those 3 images to remove the space. For example, the first image would look like:
<img src="../../navbar1.jpg" border="0" alt="Home" width="200" height="76" style="vertical-align: top">
So after removing that <br> and adding those styles to the three navbar images, it should look like this: http://i.imgur.com/XdgcTjj.png which I believe is the effect you were going for.
Also, just as a side note, Dreamweaver makes your code look absolutely atrocious and almost impossible to read. It makes finding these problems very difficult, which may be why nobody has really been able to help.
There is in fact a <br> between your tables. Giving a line might not help because it could be different in dream weaver.
What I would suggest is, open this document and then once open, press the following at the same time. CTR + F (or CMD + F on a mac) A search box will pop up, then type <br> If you do this while at the top of the document it will bring you to the first break, otherwise go to the one nearest the top. That is the one causing issues. just delete it and problem solved!
Inside of every
<td colspan="3" style="PADDING-LEFT: 10px; PADDING-RIGHT: 10px">
are "br" tags. Search for this line and you will find them all, or look at what the poster suggesting using a search function has said, it is also sufficient.
My wife discovered at least a partial answer:
Phantom <br> tag rendered by browsers prior to <table> tag
Unfortunately, the solution to that question doesn't appear to solve my problem. I validated the code using the feature in Dreamweaver 2015 that submits it W3C service and it comes back with "No warnings or errors found".
I need to find out why the image here is really small. I need these images to be retina ready, so thats why they are at 50%. Please confirm that i have done this correctly.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" width=
"700">
<tr>
<td class="leftColumnContent" valign="top" width="280">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" style=
"background-color: #eeeef9;" width="100%">
<tr>
<td align="center" valign="middle" width="50%">
<div style="text-align:center;">
<h4 style="text-align:center;">DEL IKON</h4>
<hr style=
"height: 2px;background-color: black;border: 0;width: 160px;">
<p>På alle sider på hvisk.com – når<br>
du er logget ind – finder du i<br>
venstre side et ikon, hvor der står<br>
<strong>DEL</strong>. Når du trykker på
ikonet,<br>
kommer der en ’skuffe’ frem.</p>
</div>
</td>
<td align="center" valign="middle"><img src=
"https://gallery.mailchimp.com/54366e4388f5f1f871ed3d155/images/9de246f4-90cc-4185-b1b8-16b1b402b5e2.png"
style="width:50%;"></td>
</tr>
</table><br>
<!-- // End Module: Top Image with Content \\ -->
</td>
</tr>
</table>
</body>
</html>
Setting an element to width:50% is relative to width of the parent container, not the width of the element itself, see the quick demo.
<img style="width:50%;" src="//dummyimage.com/100"/>
You could make the image at least x2 size of the parent container size then apply either of the CSS rules as needed for high pixel density displays, such as Apple retina display.
img {max-width:100%; height:auto;} or img {width:100%; height:auto;}
I know what you mean. You mean why your picture is so large (3000px) but you set 50% --> less than 1500px?
Because 50% is 50% of width td, not 50% of 3000px. Please set width:100% and maybe you know why
I am trying to create a button that looks like with text font-size:14px sitting centered middle with a special character (›) font-size:40px;
Getting the right arrow ( › ) to sit appropriately vertically aligned for email is seemingly impossible.
Currently I am using:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#b8237" background="" height="42" width="196" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;font-size:14px;" align="center" valign="middle">
<a href="" alt="Get Your $1.50 Coupon" title="Get Your $1.50 Coupon" target="_blank" style="text-decoration:none;color:inherit;">
Get Your $1.50 Coupon
<span style="font-size:40px;">›</span>
</a>
</td>
</tr>
</table>
Any assistance would be much appreciated. This needs to be bulletproof for emails. I have researched and tried multiple different ways, but have come up empty-handed.
Also, no generator allows for aligning varying font-size text.
Thanks,
Given that you want this to be bulletproof, my recommendation for something like this would be to use an image for the text and arrow, and just wrap an anchor around it. Otherwise it would be a nightmare trying to get each email client to play ball.
If this needs to remain as text, then I'd suggest you create separate cells for the text and arrow and setting them to vertical-align: middle, but you will inevitably get annoyingly varied results across clients.
Here is the updated code:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#b8237" background="" height="42" width="196" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;font-size:14px;" align="center" valign="middle">
<a href="" alt="Get Your $1.50 Coupon" title="Get Your $1.50 Coupon" target="_blank" style="text-decoration:none;color:inherit;">
<span>Get Your $1.50 Coupon </span>
<span style="font-size:40px;">›</span>
</a>
</td>
</tr>
All I did, I added "Get Your $1.50 Coupon " also in <span> tag
And I gave CSS: td span{ display:inline-block; vertical-align:middle;}
Here is the Fiddle: http://jsfiddle.net/c237t/
And If you cannot give separate CSS then here is the other way around:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#b8237" background="" height="42" width="196" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;font-size:14px;" align="center" valign="middle">
<a href="" alt="Get Your $1.50 Coupon" title="Get Your $1.50 Coupon" target="_blank" style="text-decoration:none;color:inherit;">
<span style="vertical-align:middle;">Get Your $1.50 Coupon </span>
<span style="vertical-align:middle; font-size:40px;">›</span>
</a>
</td>
</tr>
Here is the Fiddle: http://jsfiddle.net/2X9kS/