I have an image that floats and want the text afterwards to be underneath the image.
Here's what I have, it works for everything except the most popular mail client in a business environment (Outlook). I've tried wrapping them in tags and would rather not have to use 's as that could get messy in resizing situations.
Any help would be much appreciated!
Edit: I found a workaround which is to put the image into it's own row in case nobody has anything better
<tr class="acyeditor_delete" title="Deletable">
<td class="w30" width="30"></td>
<td class="acyeditor_text w540" width="540">
<img alt="picture" src="http://example.com/images/showcase/showcase_projekt.jpg" style=" height:300; width:600; float:left; margin:5px; " />
<h1 style="">My Firm - Die Branchenlösung für Handwerk und Handel</h1>
<p>
<h3>XXX ist Ihr professionelles Werkzeug für alle Bereiche der täglichen Büroarbeit. Finden Sie die Daten Ihres Unternehmens an einer zentralen Stelle und gewinnen Sie mehr Zeit fürs Wesentliche, indem Sie sich von xxx unterstützen lassen:</h3>
</p>
</td>
<td class="w30" width="30"></td>
</tr>
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 know there are similar questions like this, but I can't really make out what to change it the code.
Here the link:
SVG
It's being opened in a Window with 1024px X 768px. At leasts that's what I read out of the code. Follow this link and click onto the picture with the blue heads on the left, to make it open like it usually does for users. Link: Homepage
I read I would have to define width and height 100% to make it work, but I don't know where to write it to.
Here's the code I found:
<div style="position:relative; top:8px;">
<a title="Hier finden Sie eine kurzpräsentation über die Werbeagentur Pluskat GmbH" onclick="javascript: window.open('<?php bloginfo('template_directory')?>/images/mehrwert.svg', 'Mehrwert', 'width=1024px,height=768px,scrollbars=no');" href="#"><img src="<?php bloginfo('template_directory')?>/ images/kurz_praesi.jpg" alt="SVG Präsentation" width="237" height="160" border="0" title="Das können wir für Sie tun - 150 Sekunden Kurzpräsentation" /></a>
<p style="font-family: 'Open Sans', sans-serif; font-size:11px; line-height:17px;color: #000000;">Was wir für Sie tun können, erfahren Sie auch in unserer knapp 3-minütigen Präsentation.<br/> <strong>
<a title="Hier finden Sie eine kurzpräsentation über die Werbeagentur Pluskat GmbH" onclick="javascript: window.open('<?php bloginfo('template_directory')?>/images/mehrwert.svg', 'Mehrwert', 'width=1024,height=768,scrollbars=no');" href="#"><span>Einfach durchklicken.</span></a></strong><br/>
</p></div>
That's the whole code calling up the window with the SVG within. It works fine on every Browser, except Firefox. Firefox somehow covers it with white lines / cuts it.
WOuld be great if anyone had an answer and could somehow highlight it for me in the code.
Thank you very, very much!
I haven't tested it, but I'm guessing that you need to go into the mehrwert.svg file, and change this part of the <svg> element
width="1022" height="766"
to
width="100%" height="100%" viewbox="0 0 1022 766"
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
Here is the issue: I would like a white border on the picture, but when I send it to my outlook 2007 or 2010, it's not showing. Here is the code for the image in question:
<img src="my.jpg" alt="" width="220" height="220" border="3" style="border:3px solid #FFF;" />
Is there a fix out there for this issue? I feel like I've tried everything and nothing's worked.
This did render a border, but it's not an ideal solution because there is a space between the image and border.
<table width="220" height="220" border="0" cellspacing="0" cellpadding="0" style="border:3px solid #FFF;">
<tr>
<td>
<img src="my.jpg" alt="" width="220" height="220" border="0" title="70's Styled House and Pool" />
</td>
</tr>
</table>
I think you will have to wrap it in something. How about Span:
s = "<html><body>" _
& "<span style='display:inline-block;padding:5px;border:5px solid #fff;'>" _
& "<img src='z:\docs\image1.jpg' alt='' width=220 height=220></span>" _
& "</body></html> "
Set oEmail = Application.CreateItem(olMailItem)
oEmail.HTMLBody = s
oEmail.Display
I couldn't get the SPAN solution to work (I suspect because of extra code added by my CMS).
My solution was to wrap the image in a table with cellpadding set to the desired border width, and bgcolor set to the desired border colour. Hardly semantic, but that's Outlook's fault.
One of your issues is that hex color short-hand isn't supported in email. So you should be using all six hex digits.
<img
src="http://example.com/image.jpg"
alt=""
width="220"
height="220"
border="3"
style="border:3px solid #ffffff;" />