I am creating an code for an email signature. The image is never left align on the email client on my iPhone and I have no idea why.
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding:0;margin:0;height:45px;width:230px;">
<ul style="padding:0;margin:0;height:45px;width:230px;">
<li style="text-align:left;margin:0;padding:0;height:45px;width:230px;">
<a target='_blank' href="https://www.mypage.com" style="margin:0;padding:0;width:230px;height:45px;">
<img style="padding:0;margin:0;" height="45px" width="230px" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</li>
</ul>
</td> ......
The problem is visualized on the image below:
Is there something I can do?
Thanks for helping me.
Best regards,
Yab86
If the linked <img> is the only thing in that <td>, can you remove the <ul>? Or is there another reason the list is there?
Email clients do weird things to margin and padding of block level elements like <ul> and<li>, sometimes even if they're reset with inline CSS. If you don't need a list here, why introduce the complexity?
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td height="45" width="230" align="left" style="padding:0;">
<a target='_blank' href="https://www.mypage.com">
<img align="left" style="display: block; margin:0;" height="45" width="230" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</td>
</tr>
</table>
Related
been struggling with this issue for a bit now and its really bugging me. Basically I have some email templates that I've been working on, they work fine on all clients (Litmus tests) except for Gmail specifically on iOS, Android works fine. The issue I'm having is that I want all my tables to me 100% width so they're all the same size, however gmail resizes the tables seemingly based off the content inside.
Heres a section of my code:
<tr class="module bg-white" style="background-color:#fff;color:#23282b">
<td>
<table class="container" cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%"
style="margin:0 auto;width:100%!important;max-width:600px!important">
<tr>
<td class="card-wrapper" align="center" valign="top" style="padding:0 15px 10px">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%">
<tr>
<td class="card-content bg-white border-lightgray"
style="padding:30px 20px 20px;background-color:#fff;color:#23282b;border:solid 1px #eee">
<h2
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 20px;font-size:18px;font-weight:700;line-height:22px">
YOUR DELIVERY DETAILS</h2>
<table class="delivery-details" cellpadding="0" cellspacing="0" border="0"
role="presentation" width="100%"
style="width:100%!important;max-width:600px!important">
<tr>
<td style="vertical-align:top;padding-right:8.5px;padding-left:0">
<h3
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
Delivery Service</h3>
</td>
<td style="vertical-align:top;padding-right:0">
<p
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
Next Day</p>
</td>
</tr>
<tr>
<td style="vertical-align:top;padding-right:8.5px;padding-left:0">
<h3
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
Delivery Address</h3>
</td>
<td style="vertical-align:top;padding-right:0">
<p
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
Fake Name <br>Fake House <br>Fake Street
<br>Fake Town <br>UK <br>Fake Postcode</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
On my phone it looks like this:
Email Result on iOS 15 gmail
Is there any way to fix this? On every other client it expands to 100% no issue, thank you!
This sounds like this might be due to this bug, where Gmail adds a .munged class to <table>s and <td>s with a width:auto!important.
A solution would be to add a min-width:100% to each <table> and <td> potentially impacted.
The following HTML code displays a table which is a link to another site. That is, clicking on any pixel in the inner table (even white space) invokes the link. How do I code this in a Wiki using pipes syntax?
<!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>
<title>How To Convert A Wiki Table To A Link?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;">
<tr>
<td>
<a href="http://google.com">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="text-align: left;">M pigeons</td>
<td style="text-align: right;">000</td>
</tr>
<tr>
<td colspan="2">into N holes</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</body></html>
Pipes Syntax for this table-in-a-table looks like this (but without the ... )
{| border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;"
|
{| border="0" cellpadding="0" cellspacing="0" width="100%"
|-
|style="text-align: left;"|M pigeons
|style="text-align: right;"|000
|-
|colspan="2"|into N holes
|}
|}
How do I achieve the effect of the ... as in the HTML code above?
In a nutshell: you can do this with MediaWiki's external link syntax and a single-line HTML table, but it won't work if you have enabled HTML tidying.
MediaWiki links
In MediaWiki, the default settings are to disallow <a>...</a> tags in wikitext. This is for security reasons: if your wiki is publicly editable and <a>...</a> tags were allowed unchecked, anyone could add arbitrary JavaScript to your site, by adding links like <a onmouseover="alert(1)">foo</a>.
Instead, you add links to wikitext in two different ways. For internal links to other pages on the same wiki, you use [[Page name|display text]], which produces something like display text. For external links, you use [http://www.example.com Example], which produces a link like <a rel="nofollow" class="external text" href="http://www.example.com">Example</a>.
For what were probably Very Good Reasons At The Time, you can insert newline characters into the display text of internal links, but not external links. So this produces a valid link:
[[Page name|display
text]]
But this is just output as-is (with the URL itself linked):
[http://www.example.com display
text]
This will be important later on.
MediaWiki tables
While MediaWiki doesn't allow <a>...</a> tags in wikitext, it does allow a subset of HTML tags. This includes <table>, <tr>, <th> and <td>, which means that there are actually two ways to make tables in wikitext. The first is using wikitext table syntax, like you have done in your question:
{|
| Row 1, cell 1
| Row 1, cell 2
|-
| Row 2, cell 1
| Row 2, cell 2
|}
The second is by using HTML table elements:
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>
For wikitext table syntax, you need to add newline characters for the table to render properly. However, for HTML table tags, you can do everything on one line, like <table><tr><td>Foo</td></tr></table>.
How to put tables in links
Putting a table inside a link in MediaWiki is a matter of putting the appropriate table syntax inside the appropriate link syntax. If your link is an internal link, you can choose either of the table syntaxes:
[[Page name|
{|
| Foo
|}
]]
[[Page name|
<table>
<tr>
<td>Foo</td>
</tr>
</table>
]]
These will both produce something like the following HTML:
<a href="/wiki/Page_name" class="mw-redirect" title="Page name">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
</a>
If your link is an external one, then because the external link syntax doesn't accept newline characters, you are limited to using HTML table tags.
[http://www.example.com <table><tr><td>Foo</td></tr></table>]
This will produce something like the following HTML:
<a rel="nofollow" class="external text" href="http://www.example.com">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
</a>
In your case, the following code should do what you are trying to do:
{| border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;"
| [http://www.google.com <table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td style="text-align: left;">M pigeons</td><td style="text-align: right;">000</td></tr><tr><td colspan="2">into N holes</td></tr></table>]
|}
Why you might not want to do this
While putting table tags inside links is allowed in HTML 5, it is not allowed in HTML 4.01 or XHTML 1.0. When I tested your HTML with the W3C validator, it gave me the error 'document type does not allow element "table" here'.
I believe that more recent versions of MediaWiki use HTML 5, so this might not be an error per se. However, if your wiki uses HTML tidying software, then tables inside links might be interpreted as broken HTML, and "fixed" for you. When I tested the above code on Wikipedia, which I think currently uses the HTML 5 tidying algorithm, the link was rendered before the table.
<table border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;">
<tr>
<td><a rel="nofollow" class="external text" href="http://www.google.com"></a>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="text-align: left;">M pigeons</td>
<td style="text-align: right;">000</td>
</tr>
<tr>
<td colspan="2">into N holes</td>
</tr>
</table>
</td>
</tr>
</table>
So, if you really want to do this, then go ahead, but beware that there may be pitfalls.
One last thing: if you want to use <a> tags in wikitext as-is, it is possible to enable the $wgRawHtml option. However, do not do this if your wiki is publicly editable! It will enable people to add random JavaScript to your site, which is Not A Good Idea.
I am new to Grails and I am trying to get a template navigation bar to be populated dynamically through a controller. I am really close to solving this but seem to have run into a wall lately.
I currently am getting the navigation to populate only when I click on the link for that controller. Every where else the navigation just populates the bullet points for the links. I am probably not referencing the controller correctly in my template but have not found any good examples yet.
using Grails 2.3.3
the controllers are dynamic.
Here is the code for my navigation template
<body>
<!-- Links to the committees go here -->
<div class="leftMenu">
<!-- template of hospitals and there committees goes here -->
<div>
<g:render template="/hospital/committeeTemp" />
</div>
<tr valign="top">
<td>
<a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">
<img src="/Trustees/static/images/img/navigate.events.gif" border="0">
</a>
</td>
</tr>
<tr valign="top">
<td>
<a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">
<img src="/Trustees/static/images/img/navigate.news.gif" border="0">
</a>
</td>
</tr>
<tr valign="top">
<td>
<a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">
<img src="/Trustees/static/images/img/navigate.help.gif" border="0">
</a>
</td>
</tr>
<%-- </table>--%>
</div>
</body>
I am using a nested loop to populate the navigation bar. That code can be found here Grails navigation links nested loop
With a little more knowledge under my belt. I found out that it was only populating on that one page because that is where it was accessing that particular controller's action. So I ended up putting that mapping into ever action in my controller.
I'm trying to convert html to PDF using Rotativa I'm building the report as svg tag in html page and pass the generated view to Rotativa, it prints almost every thing except what's inside (which is here and ):
<svg style="display: block;margin-left: auto;margin-right: auto;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.2" height="1453" width="1040" y="0" x="0">
<switch>
<foreignObject x="49" y="215" width="943" height="500" class="s2_2" requiredExtensions="http://www.w3.org/1999/xhtml">
<p style="line-height: 25px;">
Any words here
</p>
<table cellspacing="0" cellpadding="0" class="styled-table">
<tbody><tr>
<th class="s3_2">Full Name</th>
<th class="s3_2">Source</th>
<th class="s3_2">Date of Birth</th>
</tr>
<tr>
<td>Caroline Ashcrof</td>
<td>Lorem ipsum dolor</td>
<td>dd/mm/yyyy</td>
</tr>
<tr>
<td>Caroline Ashcrof</td>
<td>Lorem ipsum dolor</td>
<td>dd/mm/yyyy</td>
</tr>
<tr>
<td>Caroline Ashcrof</td>
<td>Lorem ipsum dolor</td>
<td>dd/mm/yyyy</td>
</tr>
</tbody></table>
</foreignObject>
</switch>
I upgraded wkhtmltopdf.exe in rotativa to latest version (0.13) with no luck.
Is there a solution, workaround or even another module to convert html to PDF.
I don't know why but attribute "requiredExtensions" shouldn't be added when using Rotativa and want to convert to PDF
i am having the same problem as in this thread
jQuery unexpected sortable behaviour
my system is doing identically the same thing. the only difference between my code and his code is that my code is 100% generated by ajax on the fly, and im inserting tables into each of the LI, but alas the results are the same. here is the html im inserting for each of my master list entries.
here is the blank list thats in my html
<ul id=\"questionList\">
</ul>
this is generated by javascript and ajax calls on the fly
<li id="liName-11" class="ui-state-default">
<table width="600" border=".5" cellspacing="2" cellpadding="2" class="singleBorder">
<tr>
<td width="386" align="left" valign="top">
<span id="quesEditText-11">Does Default Work
</span>
<table>
<tr>
<td>
<span id="quesEditSpan-11" onclick="setEditField('ques', 11)">Edit
</edit>
</td>
<td>
<span id="quesUpdateSpan-11" onclick="updateQuestionCall('ques', 11)">Update
</edit>
</td>
<td>
<span id="deleteSpan-11" onclick="deleteQuestionAjax(11)">Delete
</edit>
</td>
</tr>
</table>
</td>
<td width="200">
<input type="text" id="answerBox11">
<br>
<a href="#" onclick="insertAnswer(11, 'answerBox11')">Insert Answer
</a>
<ul id="answerList-11">
<li id="17">
<span id="answEditText-17">lets try this answer
</span>
<table>
<tr>
<td>
<span id="answEditSpan-17" onclick="setEditField('answ', 17)">Edit
</edit>
</td>
<td>
<span id="answUpdateSpan-17" onclick="updateQuestionCall('answ', 17)" style="display:none;">Update
</edit>
</td>
<td>
<span id="deleteSpan-17" onclick="deleteAnswerAjax(17)">Delete
</edit>
</td>
</tr>
</table>
</li>
<li id="13">
<span id="answEditText-13">yet another question
</span>
<table>
<tr>
<td>
<span id="answEditSpan-13" onclick="setEditField('answ', 13)">Edit
</edit>
</td>
<td>
<span id="answUpdateSpan-13" onclick="updateQuestionCall('answ', 13)" style="display:none;">Update
</edit>
</td>
<td>
<span id="deleteSpan-13" onclick="deleteAnswerAjax(13)">Delete
</edit>
</td>
</tr>
</table>
</li>
</ul>
</td>
</tr>
</table>
</li>
folling the suggestion in the above thread, ive modified his suggestion into this
$("ul.list").live("mousedown", function(e){
e.stopPropagation();
});
but it has zero effect. works perfectly in chrome and firefox, but screws up in IE. trust me im about to just put in a script where if they see the site in IE that it will forward them to firefox and tell them to download a real browser but my boss doesn't like that idea. you guys have any idea?
Make sure your html is valid: you are closing your <span> elements with </edit>
Your script applies to a ul element with a list class which you don't define anywhere in your html.
http://api.jquery.com/event.stopPropagation/
You'll notice on this page that live() handles an event after it's already propagated up to the top of the document, so you'll need to use bind() instead of live().