In a Click handler I am trying to set the innerHTML of a div(detail_popup) with a MvcHtmlString.
MvcHtmlString Bobo = #Html.Action("_TaskDetail", "ProTask");
Note: _TaskDetail is a partial view.
If I look at Bobo in debug using the HTML visualizer it is perfect.
I then assign innerHTML as such: detail_popup.innerHTML = #Bobo;
This generates a script error ... SCRIPT1002: Syntax error
I am about to lose my gourd! Any help would be much appreciated.
Bob
This is the MvcHtmlString Bobo whose assignment gives me script errors:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
11/23/2016 1:08:14 PM
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>Excavate Foundation</td>
<td>Trench will be 36 inches deep by 25 inches wide</td>
<td>Robert L. Wells</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>12:00:00</td>
<td>50%</td>
<td>7</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>5/29/2016 12:00:00 PM</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<th>StartDateAct</th>
<th>StartDateSched</th>
</tr>
<tr>
<td>6/9/2016 1:15:00 PM</td>
<td>6/9/2016 1:15:00 PM</td>
</tr>
<tr>
<th>FinishDateAct</th>
<th>FinishDateSched</th>
</tr>
<tr>
<td>6/12/2016 1:15:00 PM</td>
<td>6/12/2016 1:15:00 PM</td>
</tr>
<tr>
<th>EstIntCost</th>
<th>EstExtCost</th>
<th>EstTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>ActIntCost</th>
<th>ActExtCost</th>
<th>ActTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>BudIntCost</th>
<th>BudExtCost</th>
<th>BudTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>SurIntCost</th>
<th>SurExtCost</th>
<th>SurTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</table>
</div>
</body>
</html>
I have pulled my hair out
Following is an abbreviated version of my partial view:
#model PromanV3.Models.ProTask
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
#System.DateTime.Now
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.TaskName)</td>
<td>#Html.DisplayFor(model => model.TaskDesc)</td>
<td>#Html.DisplayFor(model => model.TaskOwnerName)</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.Duration)</td>
<td>#Html.DisplayFor(model => model.CompPercentage)%</td>
<td>#Html.DisplayFor(model => model.TaskOptions)</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.RevisionDT)</td>
<td>#Html.DisplayFor(model => model.ProjectId)</td>
<td>#Html.DisplayFor(model => model.TaskId)</td>
</tr>
</table>
</div>
</body>
</html>
The is my div
<!-- Begin section that generates the detail popup for the task -->
<div id="DetailBox"
style="display: none;
z-index: 1000;
border: 2px solid blue;
background: yellow;
fill: white;
color: black;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
position: absolute;
font: 14px Nautilus Pompilius;
width: 150px;
height: 65px;
">
<script>
#{
ViewBag.vwbProject = 15;
if (ViewBag.vwbTask==null)
{ViewBag.vwbTask = 1;}
}
</script>
</div>
This is my click handler:
function setMouseClickmt(xpos, ypos, width, height, message)
{
function inner()
{
var MultTxtBoxID = this.node.getAttribute("id"); // 'this' refers to the clear_rect (clear rectangle) of the SVG MultTxtBox
var MultTxtBoxElement = document.getElementById(MultTxtBoxID); // grab the element
var task_ID = MultTxtBoxElement.getAttribute("id");
var detail_popup = document.getElementById('DetailBox');
var task_index = getTaskPos(task_ID, arr_of_Tasks);
detail_popup.setAttribute('data-task',task_index);
detail_popup.setAttribute('data-project',15);
var tt = detail_popup.getAttribute('data-task');
var pp = detail_popup.getAttribute('data-project');
var ldt = new Date();
var ldts = ldt.toLocaleString();
//detail_popup.innerHtml = ldts + '</br>' + tt ;
#{
MvcHtmlString Bobo = #Html.Action("_TaskDetail", "ProTask");
};
detail_popup.innerHTML = #Bobo;
/* Make the 'DetailBox' div appear */
detail_popup.style.display = 'block';
detail_popup.style.top = (100) + 'px';// '400px';//works//mTop + 'px';
detail_popup.style.left = (1200) + 'px';// //works//mLeft + 'px';
detail_popup.style.width = 250;//width;
detail_popup.style.height = 500;//height;
}
return inner;
}
This is the script output that it chokes on:
detail_popup.innerHTML =
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
11/23/2016 1:21:34 PM
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>Excavate Foundation</td>
<td>Trench will be 36 inches deep by 25 inches wide</td>
<td>Robert L. Wells</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>12:00:00</td>
<td>50%</td>
<td>7</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>5/29/2016 12:00:00 PM</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<th>StartDateAct</th>
<th>StartDateSched</th>
</tr>
<tr>
<td>6/9/2016 1:15:00 PM</td>
<td>6/9/2016 1:15:00 PM</td>
</tr>
<tr>
<th>FinishDateAct</th>
<th>FinishDateSched</th>
</tr>
<tr>
<td>6/12/2016 1:15:00 PM</td>
<td>6/12/2016 1:15:00 PM</td>
</tr>
<tr>
<th>EstIntCost</th>
<th>EstExtCost</th>
<th>EstTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>ActIntCost</th>
<th>ActExtCost</th>
<th>ActTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>BudIntCost</th>
<th>BudExtCost</th>
<th>BudTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>SurIntCost</th>
<th>SurExtCost</th>
<th>SurTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</table>
</div>
</body>
</html>
;
Please try this...
From the razor page, pass the value of Model (#Bobo) to your JS file
<script>
var tempValue = '#Bobo';
setMouseClickmt(tempValue , yourOtherValues....);
</script>
and assign the value passed in your click handler in your JS
detail_popup.innerHTML = tempValue ;
Add the single quotes around #Bobo when you use it in the script tag of the razor page.
Hope it helps
Related
My requirement is to download docx file and should be open on Microsoft word:
I am using following gems:
gem 'responders'
gem 'htmltoword
Controller code:
require 'htmltoword'
class Admin::VisibilitiesController < ApplicationController
respond_to :docx, :html, :css,:js
def preview
#project = Project.find_by(id: params[:id])
#feeder = Project.find_by(id: params[:id]).form2.last.feeder11s.first
respond_to do |format|
format.docx do
render :docx => "report1_docx",:template => 'admin/visibilities/preview.html.docx.erb', :page_height => 600, :page_width =>345
end
end
end
View file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style type="text/css">
div.alwaysbreak { page-break-before: always; }
div.nobreak:before { clear:both; }
div.nobreak { page-break-inside: avoid; }
td{padding: 2px 5px;}
</style>
<div style="padding-top:20px;">
<table style="width:800px;margin:0px auto;border:1px solid grey; background: #fff;margin: 0 auto;margin-bottom:30px;padding:10px 20px; ">
<tbody>
<tr>
<td style="padding: 15px 0 50px;">
<table style="padding:0px;overflow:hidden;display:table;">
<tbody>
<tr>
<td style="font-size: 16px;width:100%;font-weight:600">
Report No......./...../......./20116-17.....
</td>
</tr>
<tr>
<td style="font-size: 16px;width:100%;font-weight:600">
Dated: ......
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size:28px;font-weight:bold;text-align:center;padding-bottom:20px; font-style: italic;">THIRD PARTY VILLAGE INSPECTION REPORT</td>
</tr>
<tr>
<td style="font-size:28px;font-weight: bold;text-align:center;padding-bottom:25px; font-style: italic;">OF</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">RURAL ELECTRIFICATION WORKS UNDER DEEN DAYAL UPADHYAYA GRAM JYOTI YOJANA (erstwhile RGGVY 12TH PLAN)</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">IN</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">..............DISTRICT</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">SUBMITTED TO</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">........................</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">SUBMITTED BY </td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:30px;">........................</td>
</tr>
<tr>
<td style="font-style: italic; padding-bottom: 30px; padding-top: 100px;">
<table style="width: 100%; margin-top: 50px;">
<tr>
<td style="font-size:12px;padding-bottom:10px;font-weight:600">Report No (admin)/District(survey)/1st/2016-17/070</td>
<td style="font-size:12px;padding-bottom:10px;font-weight:600; text-align: right;">Dated: from survey (form1)</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 50px;">
<table style="width: 100%;">
<tr>
<td style="font-size:18px;font-weight:600">Location:</td>
</tr>
<tr>
<td style="font-size:16px;font-weight:600">Name of Village : <%= #project.form1.try(:village_name) %></td>
<tr>
<td style="font-size:16px;font-weight:600">Census Code No : <%= #project.form1.try(:census_code_no) %>
</td>
</tr>
<tr>
<td style="font-size:16px;font-weight:600">Name of Block : <%= #project.form1.try(:block_name) %></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
htmltoword gem currently provides just some basic styling support mostly on alignment and tables.
Here is opened GitHub issue https://github.com/karnov/htmltoword/issues/45 about that problem.
And here is the doc describing supported styles and classes.
Try to use some basic HTML tags instead of CSS-styles where it is possible, it seems the only way at the moment to get your word doc to be styled.
I am using rails 5 when user is registered in my website i am sending an email for him for account approval.I want to set website logo with email.
How we implement this in rails mailer view file
Html for mail template
<!DOCTYPE HTML>
<html>
<title>nytApp Email</title>
<head>
</head>
<body style="font-family: 'arial', sans-serif !important; font-size: 14px; line-height: 20px; color:#3e3e3e; background-color: #f5f5f5; font-weight: 300;">
<!-- Container Table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="640" style="margin:0 auto; background:#fff;">
<tr>
<td style="border: 1px solid #f5cd8f;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="padding: 25px 15px 20px; border-bottom: 1px solid #f5cd8f;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><%= image_path('logo.png')%></td>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-weight: bold; font-size: 16px;">
<tr>
<td style="color: #ff5e00; font-weight: 300; font-size: 20px;">Welcome to Nytapp</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 20px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td height="10"></td></tr>
<tr>
<td>Thank you for signing up as Events Promoter!</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td>You are ready to start posting your parties for free. Login to the portal by clicking on the link below:</td>
</tr>
<tr><td height="10"></td></tr>
<tr>
<td>https://nytapp.com</td>
</tr>
<tr><td height="10"></td></tr>
<tr>
<td>If the above URL does not work try copying and pasting it into your browser.</td>
</tr>
<tr><td height="8"></td></tr>
<tr>
<td>If you encounter any problem, please contact us at admin#nytapp.com</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td>Thank you,</td>
</tr>
<tr>
<td>The Nytapp team</td>
</tr>
<tr><td height="30"></td></tr>
</table>
</td>
</tr>
<tr>
<td style="border-top: 1px solid #f5cd8f; vertical-align: middle; padding: 10px 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<%= image_path('logo.png') %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
In mailer you can't give relative path. So try upload your logo somewhere in cloud like s3 and give complete logo url in image tag source.
You can also use asset_url it compute complete url.
<%= image_tag asset_url('logo.png') %>
In your html.erb file which is suppose to be send as mail
you need to wrtte something like this.....
<img src=" <%= Rails.application.secrets.host + "" + asset_path("sd_logo.png") %>"
i have html page
<table class='table table-responsive table-hover table-responsive sortable draggable' id='print' border='5'>
<thead>
<tr class='warning'>
<td>head1 <a class='delete'>delete</a></td>
<td>head2 <a class='delete'>delete</a></td>
<td>head3 <a class='delete'>delete</a></td>
</tr>
</thead>
<tbody>
<tr>
<td>body1 body1 body1dfsffffffffffffffffffffffff </td>
<td>body2</td>
<td>body3</td>
</tr>
<tr>
<td>body4</td>
<td>body5</td>
<td>body6</td>
</tr>
<tr>
<td>body7</td>
<td>body8</td>
<td>body9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
and when i need to print the page i just want to print the table
i used this css ..
#media print
{
body *
{
visibility: hidden;
}
#print, #print *
{
visibility: visible;
}
#print
{
position: absolute;
left: 0;
top: 0;
}
}
and when i print the screen the table come in the center not in the top 0px
how cound i let the table be absolute;
its not working
thank you
I've built a responsive email however, on IOS8 (in Apple mail client and in phones browser) the media queries are being ignored. Note: this is across all the IOS 8 iPhones
I've not provided a JSFIDDLE as it doesn't really work for emails since the code is all in one place.
Email can be found here
http://news.yfish.co.uk/e/9F640D904C5C4FC1AAD220AFAE5C37B3/4/preview/
<!DOCTYPE HTML>
<html>
<head>
<title>Rugby World Cup 2015</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
#outlook a { padding: 0; }
.ReadMsgBody { width: 100%; } .ExternalClass { width:100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
body { margin: 0; padding: 0; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse!important; }
body { height: 100%!important; margin: 0; padding: 0; width: 100%!important; background-color: #e6e6e7; }
a:visited { color: #ffffff; }
#media screen {
#font-face {
font-family: 'humanst';
src: url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.eot);
src: url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.eot?#iefix) format('embedded-opentype'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.woff2) format('woff2'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.woff) format('woff'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.ttf) format('truetype'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.svg#humanst521_btroman) format('svg');
font-weight: normal;
font-style: normal;
}
}
#fade {
-webkit-animation: fadeIn 1.5s forwards;
-moz-animation: fadeIn 1.5s forwards;
-o-animation: fadeIn 1.5s forwards;
animation: fadeIn 1.5s forwards;
}
#-webkit-keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#-moz-keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#-o-keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#fadeUp {
-webkit-animation: imagefadeInUp 2s 0.8s forwards;
-moz-animation: imagefadeInUp 2s 0.8s forwards;
-o-animation: imagefadeInUp 2s 0.8s forwards;
animation: imagefadeInUp 2s 0.8s forwards;
visibility: hidden!important;
}
#-webkit-keyframes imagefadeInUp {
0% {opacity: 0; -webkit-transform: translateY(50px);}
50% {opacity: 0; -webkit-transform: translateY(50px); visibility: visible; }
100% {opacity: 1; -webkit-transform: translateX(0); visibility: visible;}
}
#-moz-keyframes imagefadeInUp {
0% {opacity: 0; -moz-transform: translateY(50px);}
50% {opacity: 0; -moz-transform: translateY(50px); visibility: visible;}
100% {opacity: 1; -moz-transform: translateX(0); visibility: visible;}
}
#-o-keyframes imagefadeInUp {
0% {opacity: 0; -o-transform: translateY(50px);}
50% {opacity: 0; -o-transform: translateY(50px); visibility: visible;}
100% {opacity: 1; -o-transform: translateX(0); visibility: visible;}
}
#keyframes imagefadeInUp {
0% {opacity: 0; transform: translateY(50px);}
50% {opacity: 0; transform: translateY(50px); visibility: visible;}
100% {opacity: 1; transform: translateX(0); visibility: visible;}
}
#media screen and (max-width: 600px), and screen (max-device-width: 600px) {
body { width: auto!important; }
table[class="fullWidth"] { width: 100%!important; }
table[class="contentWidth"] { width: 90%!important; }
td[class="center"] { text-align: center!important; }
table[class="centerTable"] { display: block!important; float: none!important; margin: 0 auto!important; }
td[class="fullCell"] { display: block!important; float: none!important; width: 100%!important; }
td[id="padding"] { padding-bottom: 20px!important; }
}
#media screen and (max-width: 520px), and screen (max-device-width: 520px) {
table[class="mainTitle"] { width: 95%!important; }
img[class="imgScale"] { width: 100%!important; height: auto!important; }
}
#media screen and (max-width: 480px), and screen (max-device-width: 480px) {
td[class="mobileCell"] { display: block!important; float: left!important; width: 100%!important; padding: 0!important; }
td[class="mobileHide"] { display: none!important; }
table[class="logoCenter"] { display: block!important; float: none!important; margin: 0 auto!important; margin-bottom: 20px!important; }
table[class="gifScale"] { width: 95%!important; }
}
#media screen and (max-width: 370px), and screen (max-device-width: 370px) {
table[class="mobileTitle"] { width: 90%!important; }
}
</style>
</head>
<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="#e6e6e7">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#e6e6e7" style="background-color: #e6e6e7;"><!-- wrapper -->
<tr>
<td bgcolor="#e6e6e7">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" bgcolor="#595959">
<table width="99%" cellpadding="0" cellspacing="0" border="0" align="left" bgcolor="#595959"><!-- header -->
<tr>
<td height="25">
</td>
</tr>
<tr>
<td width="33%" style="padding-left: 20px;" class="mobileCell">
<table width="105" cellpadding="0" cellspacing="0" border="0" align="left" class="logoCenter">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/logo.png" width="105" height="36" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;" class="img-scale">
</td>
</tr>
</table>
</td>
<td width="33%" align="center" class="mobileCell">
<table width="91" cellpadding="0" cellspacing="0" border="0" align="center"><!-- social -->
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/facebook.png" width="13" height="21" alt="Like us on Facebook" border="0" style="display: block; border: 0;">
</td>
<td width="20">
</td>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/twitter.png" width="22" height="15" alt="Follow us Twitter" border="0" style="display: block; border: 0;">
</td>
<td width="20">
</td>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/mail.png" width="16" height="11" alt="Contact us!" border="0" style="display: block; border: 0;">
</td>
</tr>
</table><!-- end social -->
</td>
<td width="33%" style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 11px; color: #ffffff; line-height: 15px; text-align: right; vertical-align: middle; padding-right: 20px;" valign="middle" class="mobileHide">
It's a crime, not to view online
</td>
</tr>
<tr class="block">
<td height="25">
</td>
</tr>
</table><!-- end header -->
</td>
</tr>
<tr>
<td bgcolor="#ffc216">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffc216">
<tr>
<td height="50">
</td>
</tr>
<tr>
<td align="center">
<table width="680" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td align="center">
<table width="505" cellpadding="0" cellspacing="0" border="0" align="center" class="mainTitle">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/title.png" width="505" height="61" alt="Rugby World Cup" style="display: block; border: 0;" class="imgScale" id="fade">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td align="center">
<table width="437" cellpadding="0" cellspacing="0" border="0" align="center" class="gifScale">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/flag.gif" width="437" height="233" alt="Rugby" style="display: block; border: 0;" class="imgScale" id="fadeUp">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td align="center">
<table width="680" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff" class="fullWidth">
<tr>
<td height="50" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="356" cellpadding="0" cellspacing="0" border="0" align="center" class="mobileTitle">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/titletwo.png" width="356" height="52" alt="Join us on the 19th September" style="display: block; border: 0;" class="imgScale">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td style="font-family: georgia, verdana, sans-serif; font-size: 18px; line-height: 22px; color: #424242; text-align: center; font-style: italic;" bgcolor="#ffffff">
Your V.I.P invitation
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 13px; line-height: 17px; color: #424242; text-align: left;" class="center">
Previewer I’d love if you could join me at our Yellow Fish table for an afternoon and night of hospitality, Yellow Fish style!<br><br>
Aside of full hospitality and category A seats at the fabulous AMEX stadium, I’d like to invite you to stay overnight in Brighton, provide you with transfers to/from the match, enjoy a bit of Brighton nightlife and then brunch on Sunday before you head off. All you have to do is get to Brighton!<br><br>
Kick off is at 16:45 so I’d plan for being in to Brighton around lunch time and once I have more information I’ll firm up details.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td width="50%" valign="top" class="fullCell" id="padding">
<table width="248" cellpadding="0" cellspacing="0" border="0" align="left" class="centerTable">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/attending.png" width="248" height="45" alt="I can attend" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
<td width="50%" valign="top" class="fullCell">
<table width="248" cellpadding="0" cellspacing="0" border="0" align="right" class="centerTable">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/unable.png" width="248" height="45" alt="I'm unable to attend" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 13px; line-height: 17px; color: #424242; text-align: left;" class="center">
It should be great fun, a great game watching the Bokkers in Brighton and I really hope you can join me.<br><br>
Best
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table width="112" cellpadding="0" cellspacing="0" border="0" align="left" class="centerTable">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/maria.png" width="112" height="33" alt="Maria" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100" bgcolor="#ffffff">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td bgcolor="#595959">
<table width="680" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#595959" class="fullWidth"><!-- footer -->
<tr>
<td height="25">
</td>
</tr>
<tr>
<td align="center">
<table width="105" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/logo.png" width="105" height="36" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 15px; color: #ffffff; text-align: center;">
Tel +44 (0) 1273 223 500 | Fax +44 (0) 1273 323 257 | contact#yfish.co.uk<br><br>
Copyright © 2014 Yellow Fish
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
</table><!-- end footer -->
</td>
</tr>
</table>
</td>
</tr>
</table><!-- end wrapper -->
</body>
</html>
I've tried removing all other queries and also tried altering Query widths. No luck!
Thanks in advance
Unfortunately, nobody has been able to provide me with a solution.
Fortunately, I have figrued it out. IOS 8 DOES NOT like commas in media queries.
When removing the comma:
#media screen and (max-width: 480px), and screen (max-device-width: 480px) {}
to
#media screen and (max-width: 480px) and screen (max-device-width: 480px) {}
This fixes everything. However, the comma did not cause issues on IOS 7
I am trying to figure out the difference between putting an align attribute on a table cell vs using text-align css attribute. The code below shows different results in IE vs Others. In IE, the align ends up aligning every sub child, so the text 'test' is centered aligned, while in FF/Webkit this is not the case and it remains left aligned. What is the correct behavior?
<!DOCTYPE html>
<html>
<head>
<style>
table { width: 60%; }
table td { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td align='center'>
<table>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The align attribute is old-style "tag-soup" HTML, deprecated according to an official W3 document. Prefer CSS styling, as with
<td style="text-align: center;">
<!-- Content -->
</td>
Better still, give the TD a className (e.g., a semantic className like "center") and set that style in the stylesheet:
td.center {
text-align: center;
}
CSS:text-align and HTMLElement.align property works differently if there are block elements(Ex: tables) as children, so replace with caution.
See this demo below for reference.
.Container { border: solid 1px gray; width: 400px }
.Container table { border: solid 1px yellow; width: 250px }
.Container div { border: solid 1px red; width: 250px }
.CenterSelf { margin: auto }
.CenterChildren { text-align: center /* For inline elements. */ }
.CenterChildren table, .CenterChildren div
{ margin: auto /* For common block elements. Add other element selectors if necessary. */ }
.ResultTable { border-collapse: collapse }
.ResultTable td { text-align: center; border: solid 1px #ccc; padding: 0.3em }
<table class="Container" align="center">
<tr><td>TABLE1</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<table class="Container" style="text-align: center">
<tr><td>TABLE2</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<div id="Container1" class="Container" align="center">
DIV1
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container2" class="Container" style="text-align: center">
DIV2
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container3" class="Container CenterChildren">
DIV3
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container4" class="Container CenterChildren CenterSelf">
DIV4
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<hr />
<table class="ResultTable">
<tr>
<td> </td>
<td colspan="2">TABLE</td>
<td colspan="2">DIV</td>
</tr>
<tr>
<td>Elements</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
</tr>
<tr>
<td>Self</td>
<td>O</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>inline child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>inline child of inline child</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>
<tr>
<td>block child</td>
<td>X</td>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>inline child of block child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
</table>
O: Centered
X: Not centered