i have crawled a website using html agility pack and the images links are stored in my SQL database, but when i display those images on my ASP web form on repeater images are showing nothing but a broken mark or cannot see images, is it the links unable to take image online or what is the problem? i have checked all the image links they work fine and show images when i search them on browser but cannot see them in repeater what can be the problem?
<div style="width:100%; height:100%; margin-top:35px;">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div style="border: 2px none #0d0c0c; width:70%; background-color:#37546f; margin-left:70px; border:inset;">
<table>
<tr style="height:180px; width:180px;">
<td style=" width:200px;">
<asp:Image ID="Laptop" ImageUrl='<%# Eval("ImageLink")%>' Height="212px" Width="180px" runat="server" />
</td>
<td >
<table style="margin-top:-25px;">
<tr>
<td style="color: black; font-style: italic; font-size: large;">NAME
</td>
<br />
<br />
<td> <%#Eval("Name") %>
</td>
</tr>
<tr>
<td style="color: black; font-style: italic; font-size: large;">PRICE
<br />
</td>
<br />
<td>
<%#Eval("Price") %>
</td>
</tr>
<tr>
<td style="color: black; font-style: italic; font-size: large;"> Link
<br />
<td> For more details.. </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</asp:Repeater>
</div>
Related
I have a report which is completely of HTML based. I'm trying to automate and using selenium webdriver for finding the elements. In one of the part, below is the HTML format
<tbody>
<tr>
<td style="border: 1px solid #D1D1D1; background-color:#F4F4F4; color: #707070;padding :2px;">
<table style="width: 100%;
border-collapse: collapse; font-size: 15px;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;" role="presentation">
<tbody><tr>
<!--Action Date -->
<td></td>
<td width="100%" valign="top" align="right">
<span style="font-size: 12px;">12/7/20 10:21 AM</span>
</td>
</tr>
<tr>
<!-- Name and status column -->
<td style="" width="25" valign="top" align="center">
<img src="images/qual_checkmark_24.png" alt="">
</td>
<td width="535">
<span>First line of <strong>TEXT</strong></span>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="border: 1px solid #D1D1D1; background-color:#F4F4F4; color: #707070;padding :2px;">
<table style="width: 100%;
border-collapse: collapse; font-size: 15px;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;" role="presentation">
<tbody><tr>
<!--Action Date -->
<td></td>
<td width="100%" valign="top" align="right">
<span style="font-size: 12px;">12/7/20 10:18 AM</span>
</td>
</tr>
<tr>
<!-- Name and status column -->
<td style="" width="25" valign="top" align="center">
<img src="images/qual_arrowupcircleblue_24.png" alt="">
</td>
<td width="535">
<span>Second line of<strong>TEXT</strong></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I wanted to find the text in span tag (eg: first line of text, second line of text ) where i don't have any other attributes. I tried various other way of finding it via xpath, cssSelector and nothing works. Could someone help?
Try to use this XPath to select span nodes without attributes:
//span[not(#*)]
//tbody/tr[2]/td/span
you can use the parent as reference, in the html you provided the span is under the tr which is second element of tbody.
//tbody/tr[2] , will find all elements which are second child of tbody , and then direct child td/span
A combination of both answers would be probably best:
//tbody/tr/td/span[not(#*)]
It's still flexible and less error-prone at the same time.
There are two sets of <span> tags. One that holds the datetime e.g. 12/7/20 10:18 AM and the other that holds the text e.g TEXT.
To print the list of <span> tag texts you need to induce WebDriverWait for the visibilityOfAllElementsLocatedBy() and you can use Java8 stream() and map() and you can use either of the following Locator Strategies:
xpath:
List<String> myTexts = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//tbody//tr/td/table/tbody//tr//td/span[./strong]"))).stream().map(element->element.getText()).collect(Collectors.toList());
System.out.println(myTexts);
I’m trying to automate and select the drop down values.
2 fields are having same drop down values (i.e.). Yes and No and both field has similar HTML code . So unable to find unique Xpath in order to click on second field and it is throwing an org.openqa.selenium.ElementNotInteractableException exception. Since the tag name is not SELECT, so I couldn’t use SELECT Class.
HTML Code:
1st Field
<table id="ssl" class="x-field dropdown x-form-item x-box-item x-field-default x-vbox-form-item x-form-dirty" style="margin: 0px; width: 660px; table-layout: fixed; left: 9px; top: 36px;" cellpadding="0">
<tbody>
<tr id="ssl-inputRow">
<td id="ssl-labelCell" class="x-field-label-cell" style="" halign="left" width="385" valign="top">
<label id="ssl-labelEl" class="x-form-item-label x-form-item-label-left" for="ssl-inputEl" style="width:380px;margin-right:5px;">Use SSL to connect to NetScaler </label>
</td>
<td id="ssl-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" colspan="2" role="presentation" style="width: 100%;">
<table id="ssl-triggerWrap" class="x-form-trigger-wrap" style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="ssl-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1668" class="x-hide-display x-form-data-hidden" role="presentation"></div>
<input id="ssl-inputEl" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" autocomplete="off" name="ssl" readonly="readonly" style="width: 100%; -moz-user-select: text;" aria-invalid="false" data-errorqtip="" type="text">
</td>
<td id="ext-gen1667" class="x-trigger-cell" style="width:22px" valign="top">
<div id="ext-gen1666" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
2nd Field:
<table id="isDiscovery" class="x-field dropdown x-form-item x-box-item x-field-default x-vbox-form-item x-form-dirty" style="margin: 0px; width: 660px; table-layout: fixed; left: 9px; top: 67px;" cellpadding="0">
<tbody>
<tr id="isDiscovery-inputRow">
<td id="isDiscovery-labelCell" class="x-field-label-cell" style="" halign="left" width="385" valign="top">
<label id="isDiscovery-labelEl" class="x-form-item-label x-form-item-label-left" for="isDiscovery-inputEl" style="width:380px;margin-right:5px;">Discover StoreFront hosts using this NetScaler </label>
</td>
<td id="isDiscovery-bodyEl" class="x-form-item-body" colspan="2" role="presentation" style="width: 100%;">
<table id="isDiscovery-triggerWrap" class="x-form-trigger-wrap" style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="isDiscovery-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1671" class="x-hide-display x-form-data-hidden" role="presentation"></div>
<input id="isDiscovery-inputEl" class="x-form-field x-form-text" autocomplete="off" name="isDiscovery" readonly="readonly" style="width: 100%; -moz-user-select: text;" aria-invalid="false" data-errorqtip="" type="text">
</td>
<td id="ext-gen1670" class="x-trigger-cell" style="width:22px" valign="top">
<div id="ext-gen1669" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Tried Xpath (but it is failing to select 2nd field)
1st field xpath:
.//*[#id='ssl-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
.//*[#id='ssl-inputEl’]//following::div[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), ‘Yes’)]
.//*[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), 'Yes')]
.//*[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
2nd field xpath:
.//*[#id='isDiscovery-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
.//*[#id='isDiscovery-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), ‘Yes’)]
.//*[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), 'Yes')]
.//*[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
I've been reading and researching how to build a responsive email - the thing is I am building it using a table. I know tables are not responsive by nature; however, I've been reading up on responsive design, media queries, and such and I still cannot find a solution. Below is what I have so far. Any help would be greatly appreciated as I would like to learn how to make an email responsive.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Trident Email</title>
<style type="text/css">
#media (max-width: 480px){
table,tbody,tr,td,img {
display:block;
}
div#background {
width: 400px;
}
table#container{
width:300px;
}
}
</style>
</head>
<body>
<div id="background" style="background-color:#eeee00;padding:10px 0;margin:0 320px;">
<table style="margin:0px auto;border-spacing:0px;border-collapse:collapse;text-align:center;" cellpadding="0" cellspacing="0" width="600" align="center">
<tbody>
<tr>
<td>
<table id="container" style="border-spacing:0px;border-collapse:collapse;" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2384384346-jpg/Headers_Footers/Trident_is_Coming_to_Town.jpg?t=1446144504152" width="100%" style="vertical-align:bottom;">
</td>
</tr>
<tr>
<td>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td></td>
<tr>
<td style="text-align:left;" width="65%">
<table cellpadding="5" cellspacing="10" width="100%">
<tbody>
<tr>
<td>
<div style="">
<p><span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>Date:</strong></span></p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;"><strong>November 2, 2015</strong></span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>time:</strong></span>
</p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;"><strong>10:00AM - 2:00PM</strong></span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>location:</strong></span>
</p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;line-height:1.5;"><strong>Fort Rucker Army Installation<br/>Bldg.4502, Room 303</strong></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td width="35%" style="text-align:right;">
<div>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2668017528-jpg/images/Outreach/James_Shiver_175px.jpg?t=1446144504152" width="100%">
</div>
<p style="text-align:left;" color="#ffffff" align="left"><span style="font-family: helvetica; color: #ffffff;" color="#ffffff"><strong>James Shiver</strong></span><br/><span style="font-family: helvetica; font-size: 13px; color: #ffffff;">334-470-9146</span><br><span style="color: #ffffff;">james.shiver#trident.edu</span></p>
</td>
</tr>
</tbody>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="20"></td>
<td width="80">
<div style="border-top:2px solid #9c800d;width:98%">
<p style="color:#ffffff;text-align:center;font-family:helvetica;font-weight:bold;">
Can't stop by? Visit us Online:
</p>
</div>
</td>
<td width="20"></td>
</tr>
</tbody>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);text-align:center;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td width="20"></td>
<td>
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
trident.edu/james
</p>
</div>
</td>
<td width="">
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
News and Events
</p>
</div>
</td>
<td>
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
University Blog
</p>
</div>
</td>
<td width="20"></td>
</tr>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="20"></td>
<td width="60">
<div>
<p style="color:#ffffff;text-align:center;font-family:helvetica;font-weight:bold;">
Trident University<br/>1212 Plaza Dr.<br/>Cypress, CA 90630
</p>
</div>
</td>
<td width="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="60">
<div>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2102317013-png/outreach_emblem-188px.png?t=1446144504152&width=80&name=outreach_emblem-188px.png" width="80" align="center">
</div>
</td>
<td width="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="60"><p style="color:#ffffff;font-size:13px">Unsubscribe</p></td>
<td width="20"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You need to include an !important in the media query in the <style> so that it can override the inline styles in the email body. This allows table cells to became full width and stack on small viewports.
Here is a basic example of responsive 2-column email layout using media queries:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- META Stuff -->
<!-- CSS Reset -->
<style>
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
}
</style>
</head>
<body width="100%" bgcolor="#000000" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #000000;">
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<td class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
Column 1 Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
Column 2 Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
<!-- Column : END -->
</tr>
</table>
</td>
</tr>
<!-- 2 Even Columns : END -->
</table>
</center>
</body>
Full code available here
I have a table with 4 columns. The second column displays an email address and i'd like that column to take up the maximum amount of width within the table that it can. Then when the viewport size becomes smaller, the column width should be responsive and the email displayed should truncate if it becomes too large for the column.
All the solutions i've found so far either use table: {table-layout:fixed;} or set a max-width value on the td. Which are no good for me as they force the columns to specific widths.
This is what i'm trying to achieve regarding the column width layout, but the truncation fails. I read on an SO comment (showing the max-width solution) that setting width: 100% and min-width: 1px would have the desired affect, but it doesn't appear to work.
http://plnkr.co/edit/gIC5u6wq6oCYhF5pCJJp?p=preview
This is a max-width example where at least the text truncates, but the column widths are wrong.
http://plnkr.co/edit/e8sj2iqRUpBytMomddCS?p=preview
I've also tried wrapping the email text in a div, setting the width of the td to 100% and then setting the truncation on the inner div (also with width: inherit) but that didn't work either.
Add a class to other columns i.e Checkbox, Staff and Client columns and fix their width by giving appropriate widths.
Below is the HTML and CSS code:
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Email</th>
<th class="text-center">Staff</th>
<th class="text-center">Client</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
You can find that an additional class other-col is added in the above code.
CSS
/* Styles go here */
.email-col {
/*width: 100%;
min-width: 1px;*/
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.other-col {
width:10%;
}
Add style for that cell
word-break: break-all;
Anyone who gets back to me on this is an absolute legend. I sincerely hope this is just a matter of being too close to the code and I am not able to see it any more. In most if not all browsers and email clients the code is rendering fine. But in GMAIL, the bottom table is blowing out the left and the content on the right hand side to the the right.
Here is a shot of it on litmus: https://betalondon.litmus.com/pub/dfe0bd6
And here is the full code:
<!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>ENO MAGIC FLUTE e-mail</title>
</head>
<body>
<table align="center" bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table width="1030px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="140" valign="top" bgcolor="#000000" style="line-height: 0px;">
</td>
<td valign="top" width="600" bgcolor="#000000">
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<table height="135" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="middle" border="0">
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/header2.jpg" alt="logo" width="600" height="283" border="0"/>
</td>
<td valign="bottom" border="0" width="18" height="15" bg-color="#ffffff">
<br/>
<br/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td width="310" valign="top">
<table cellpadding="0" width="300" cellspacing="4" border="0" style="margin-top: 15px; margin-left: 10px;">
<!--Title text--><tr>
<td align="left">
<span style="text-decoration: uppercase; font-family:Helvetica, Arial; font-size:14px; color:#000000; line-height:120%;">MOZART's<br/>
</span>
<span style="text-decoration: uppercase; font-family:Helvetica, Arial; font-size:25px; color:#000000; line-height:150%;"><strong>THE MAGIC FLUTE</strong></span><br/>
<span style="text-decoration: uppercase; font-family:Helvetica, Arial; font-size:14px; color:#000000; line-height:150%;">13 Sep - 18 Oct</span><br/>
</td>
</tr>
<tr>
<!--Body-text--><td align="left">
<span style="font-family:Helvetica, Arial; font-size:14px; color:#000000; line-height:120%;">
You are invited back to witness the adventure, music and emotion of one of Mozart's most stirring operas, your last chance to witness Nicholas Hytner's lavish production.<br/><br/>
Its distinctive characters, Papageno, Pamina, Sarastro and The Queen of the Night, along with magical sets, costumes and fantasy creatures, make this remarkable opera one not to be missed. Catch one of the final ten performances for what's been considered <em>'one of ENO's most magical interpretations'</em> (The Times)<br/><br/>
This time why not share the enjoyment and bring friends and family.
</span>
<br/>
<br/>
<table style="background:#e4e4e4; border: solid 1px #d7d7d7;">
<tr>
<td style="padding: 5px;">
<span style="font-family: arial, helvetica, sans-serif; color:#000000; font-size: 18px;">
Final 10 performances<br/>
Tickets from £19<br/>
Children under 16 half price<br/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/booknow.png" border="0"/>
</span>
</td>
</tr>
</table>
<br/>
</td>
</tr>
</tr>
</table>
<br/><br/>
<br/><br/>
</td>
<td><img src="http://content.high50.com/emails/20012012/images/1x1.gif" width="35" height="5" border="0" /></td>
<td valign="top">
<br/>
<table width="255" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td valign="top" width="280" align="left">
<font style="font-family:arial; font-size:14px; color:#000000; line-height:1.5em; padding-left: 40px; margin-top: 15px;"><strong>BOX OFFICE: </strong></font><br/>
<span style="font-family: arial; color: #ed1c24; font-size: 18px; padding-left: 40px;">020 7845 95300</span><br/>
<span style="font-family: arial; ">
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/fbook.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/twitter.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/youtube.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/flickr.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/vimeo.png" border="0"/>
</span>
<br/>
<br/>
<img style="padding-left: 11px;" src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/listen.png" border="0"/></a>
<br/>
<span style="font-family:Georgia, arial, helvetica, sans-serif; font-size:14px; color:#999999; line-height:1.5em; font-style: italic; padding-left: 40px; float: left; text-decoration: none;">
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/arrow.png" style="float: left;" align="left" border="0" hspace="3" valign="middle" border="0"/>Overture<br/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/arrow.png" style="float: left;" align="left" border="0" hspace="3" valign="middle" border="0"/>Queen of the Night<br/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/arrow.png" style="float: left;" align="left" border="0" hspace="3" valign="middle" border="0"/>Papagena and Papageno</span>
<br/>
<br/>
<br/>
<br/>
</td>
</tr>
</table>
</td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table height="" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="600">
<tr>
<td valign="top">
<hr style="width: 600px; color:#6493b1; border: dotted 1px;"/>
<a href="mailto:?Subject=Book tickets to see The Magic Flute&body=Shall we go and see this opera together?: You are invited back to witness the adventure, music and emotion of one of Mozart's most stirring operas, your last chance to witness Nicholas Hytner's lavish production. Book here
#[http://www.eno.org/see-whats-on/productions/production-page.php?selected_date=13-09-2012&itemid=2130]#"><img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/forward.png" alt="forward this e-mail to a friend" width="" height="" border="0"/></a>
<span style="float: right; font-family: arial;"><strong>FOLLOW US</strong>:
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/fbook.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/twitter.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/youtube.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/flickr.png" border="0"/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/vimeo.png" border="0"/>
</span>
<br/><br/>
<center><span style="text-align: center; font-family: arial; font-size: 20px;"><strong>ENGLISH NATIONAL OPERA</strong></span><br/><span style="text-align: center; font-family: arial; font-size: 12px;">London Coliseum, 38 St. Martin's Lane, London, WC2N 4ES BOX OFFICE: 020 78459300<br/><br/>
<img src="http://www.beta-testing.co.uk.php5-23.ord1-1.websitetestlink.com/eno/artslottery.png" border="0"/><br/><br/>
ENO is a registered charity in England (no 257210)</span><br/><br/>
<span style="font-family: arial; font-size: 11px;">Photos: GTG/ Yunus Durukan</span> <br/>
<hr style="border:1px dotted; color:#6493b1;"><br/><br/>
Unsubscribe</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table height="90" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tr>
<td valign="top" align="center">
<br /><br />
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="140" valign="top" bgcolor="#000000"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Your HTML is invalid. Use the W3C validator service to check it. Pay special attention to errors like this:
Line 91, Column 37: end tag for "table" omitted, but OMITTAG NO was
specified
For me it worked:
1- Open Firefox with Firebug
2- Go to gmail
3- Click "Compose"
4- Right click on the textfield, and choose "Inspect element with Firebug"
5- Search the following code:
[-] <iframe id=":jo" class="Am Al editable" frameborder="0" style="padding: 0px; height: 569.5px; background-color: white;" tabindex="1">
[-] <html style="background:none transparent;min-width:0;">
[+] <head>
[+] <body id=":jo" class="editable LW-avf" style="min-width:0;" hidefocus="true" g_editable="true">
</html>
</iframe>
6- Select <body> and click Edit button
7- Paste your code between <body> and </body> (not included).
8- Close firebug
9- Send the email.