I noticed apple mail 13 (exactly mine Version 13.0 (3608.40.2.2.4)) start push images what size are as big as email itself to left. Some time back it could be solved with align="center" like this:
<tr>
<td algin="center">
<img src="something.jpg" alt="" width="600" style="width: 600px; max-width: 100%; height: auto;"/>
</td>
</tr>
but now its no longer working and its make this:
I tried body padding 0 and < meta name="x-apple-disable-message-reformatting"/> but without succes.
Does anybody know how to center that to middle? It is just on apple mail, other clients are fine.
For what it's worth, the align=center fix just made it work for me.
Related
I'm working on a warning banner to be displayed for our users to warn them not to click the links or attachment in a suspicious email, so that they can be warned about any phishing or spoofing. This is by using the "prepend a disclaimer" rule in exchange online.
I've followed a tutorial on prepending this banner onto an email but Outlook doesn't seem to render the background colours on the table? It just displays the text content only.
Code is here:
<!-- Yellow caution banner -->
<table border=0 cellspacing=0 cellpadding=0 align="left" width="100%">
<tr>
<!-- Remove the next line if you don't want the Yellow bar on the left side -->
<td bgcolor="#ffb900" style="background-color:#ffb900;padding:5pt 2pt 5pt 2pt"></td>
<td width="100%" bgcolor="#fff8e5" cellpadding="7px 6px 7px 15px" style="background-color:#fff8e5; padding:5pt 4pt 5pt 12pt; word-wrap:break-word; font-family:sans-serif">
<div style="color:#222222;">
<span style="color:#222; font-weight:bold;">Caution:</span>
This is an external email and has a suspicious subject or content. Please do not click on any links or download any files unless you know the sender and you are expecting this message. If you are unsure, please contact the IT Helpdesk.
</div>
</td>
</tr>
</table>
<br />
I'm trying to get it to look like this:
(https://i.stack.imgur.com/yltQ7.png)
But I receive this instead.
(https://i.stack.imgur.com/3fiZx.png)
It doesn't seem to matter whether dark mode is enabled or not. As far as I know, HTML is enabled in outlook.
Thanks in advance for any help with this.
Didn't work to me as well. Try this:
<table border=0 cellspacing=0 cellpadding=0 align="left" width="100%">
<tr>
<!-- Remove the next line if you don't want the Yellow bar on the left
side -->
<td style="background:#ffb900;padding:5pt 2pt 5pt 2pt"></td>
<td width="100%" cellpadding="7px 6px 7px 15px" style="background:#fff8e5;padding:5pt 4pt 5pt 12pt;word-wrap:break-word">
<div style="color:#222222;">
<span style="color:#222; font-size:13px; font-weight:bold;">CAUTION:</span>
<span style="color:#222; font-size:13px;">This email is from an external source. Do not click links or open attachments unless you recognize the sender and know the content is safe. When in doubt, contact Nova IT department
</div>
</td>
I'm trying to create .oft template for outlook 2010 with a text over an image - text should be customisable by the end users...
If I create new e-mail from a html file and save it as template, input is not editable (using just a normal styled paragraph)
If I create new e-mail template directly in outlook, everything is ok for users, but it doesn't send it properly - everything is send as an attachment - so it doesn't display it properly in some mail clients (e.g. gmail).
Is there any bullet proof way how to create e-mail templates for outlook 2010 ?
I made a Fiddle so you can see this code in action: https://jsfiddle.net/wallyglenn/7zLaLrfx/
<div style="background-color:#ff0000; width:600px;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
</v:background>
<![endif]-->
<table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
<h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
Background Image with text on top
</h1>
</td>
</tr>
</table>
</div>
The original code was taken from https://backgrounds.cm.
Good luck.
I am making HTML Emailer.
The issue i am facing is that , when i see the output of my code in Outlook, then
Register Online text gets down in the outlook.
like Register in one line and Online in new line.
<table cellspacing="0" cellpadding="0" border="0" style=";border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background: transparent;">
<tbody><tr>
<td valign="middle" height="40" align="center" class="main-bg-color" style=" background: #ffee00;color: black;display: block;padding-left: 20px;padding-right: 20px;!important; width:100px; cursor: pointer;">
<div class="modtxt"><span class="wrap_textbox"><a style="color: black;text-align: center; display:block; text-decoration: none;-webkit-text-size-adjust: none;font-size: 10px;line-height: 40px;text-transform:uppercase;font-family: \'proxima_novasemibold\', Arial, sans-serif;" href="http://www.hubilo.com/widget/webpanel/login.php?event=c1d1b1dc8d40c37429a8fd1f627c5c5e"><span style="font-weight:100;">Register Online</span></a></span></div>
</td>
</tr>
</tbody></table>
How can I solve it?
Thank You.
I'm not entirely sure what you want to do, but if it's make sure that "register online" doesn't ever break onto two lines, then the easy solution for Outlook is to use a non-breaking space character ( ) rather than a space.
REGISTER ONLINE
This should solve that particular issue.
I use xhmtl2pd tool to convert html to pdf. Here is a piece of my html
<tr>
<td style="width:10px;vertical-align:top">• </td>
<td style="padding:0 0 5px 0;width:200px;display:inline-block">
blah blah <br/>
<img src="images/little-gray-arrow.png" height="10" width="11" alt="blah" />
</td>
</tr>
The bizarre thing is if I remove the br tag then the image of little-gray-arrow.png never shows up. Put the br tag back, the image shows up in the "next" line.
I have tried with all options, padding, margin, and none works.
I also try to inline-displaying an image between text, and the image clock.png bottom half always get cut off, regardless what I tried.
<tr>
<td style="width:10px;vertical-align:top">• </td>
<td style="padding:0 0 5px 0;width:200px;">
Wait
<img src="images/clock.png" height="20" width="20" alt="20" />
minutes
</td>
</tr>
Does anyone know how to solve this problem and it is just the way xhmtl2pdf is.
Can the xhtml2pdf display image inline?
Thanks
Dont use absolute paths in url or src. Use fullpath like https://abcd.com/.../image.png . It worked for me
If you need render image format like GIF or PNG, you should install PIL library. The Python Imaging Library (PIL) is requred by ReportLab for handling PNG/GIF image.
Refer: Output image to pdf with xhtml2pdf
In IE6, the expander graphic for the root node in the table is not showing up. If I position the mouse in the correct spot next the the root nodes text I can actually click the expander.
The expander does show up for all child nodes.
The odd thing is the examples at the TreeView site show the root expander image in IE6. I can't see the difference between the examples code and mine. I did a side by side comparison of the CSS for the elements in question and nothing jumps out at me.
I have no extra styling than the stylesheet that came with the plug-in provides.
<script type="text/javascript">
$(document).ready(function() {
$("#tree").treeTable();
});
</script>
-
<body>
<table id="tree">
<tr id="node-1">
<td>Parent</td>
</tr>
<tr id="node-2" class="child-of-node-1">
<td>Child</td>
</tr>
<tr id="node-3" class="child-of-node-2">
<td>Child</td>
</tr>
</table>
</body>
Just for reference, since i ran into this trouble too...
The first parent image doesn't show because the space for the image to be is too small, so the treetable.css and treetable.js need to be modified.
In jquery.treeTable.js, change the line:
cell.prepend('<span style="margin-left: -' + options.indent + 'px; padding-left: ' + options.indent + 'px" class="expander"></span>');
To:
cell.prepend('<span class="expander"></span>');
And in jquery.treeTable.css, add the last two lines (margin-left and padding-left) to ".treeTable tr td .expander":
.treeTable tr td .expander {
background-position: left center;
background-repeat: no-repeat;
cursor: pointer;
padding: 0;
zoom: 1; /* IE7 Hack */
margin-left: -3px;
padding-left: 15px;}
°°°°°°°°°°°°°°°°°°°°°°°°°
I didn't Modify the Code, the above tip was taken from:
http://javathoughts.capesugarbird.com/2009/03/jquery-tree-table-for-wicket.html
-VicSan.
I agree with VicSan solution, although I prefer not to modify TreeTable source code (so I can upgrade it to future versions without need to make again my changes inside the new code). So I suggest you to simply add a padding-left in the style attribute of the first cell of the first row of your tree-table (the root):
<body>
<table id="tree">
<tr id="node-1">
<td style="padding-left: 19px">Parent</td>
</tr>
<tr id="node-2" class="child-of-node-1">
<td>Child</td>
</tr>
<tr id="node-3" class="child-of-node-2">
<td>Child</td>
</tr>
</table>
</body>
I put 19px because it's the default, but, if you specified another value in the indent option (when you create the tree-table with .treeTable(...)), put that one.