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;" />
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 working on some email templates (god forbid) and I'm trying to figure out how to display a circular avatar in a table next to the associated contact.
Currently I'm using this code. Using a v:fill to apply a background image and a v:rect to apply a border radius. However I'm not having any success.
One main point is I don't want any content within this element. Its existence is to provide the avatar image so I've struggled to find anything to help me.
Help greatly appreciated!
<table>
<td background="https://picsum.photos/32" width="32" height="32" valign="top" style="border-radius: 50%">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" arcsize="50%" stroke="false" style="width:32px;height:32px;">
<v:fill type="tile" src="https://picsum.photos/32" arcsize="50%" color="#7bceeb" />
</v:rect>
<![endif]-->
</td>
</table>
I found the solution worked well. Using a <v:oval> to give the shape and <v:fill> to give the image.
Though I found I did I have to set the stroke on the oval to false, it seems to be defaulted to on.
<td width="32" style="margin: 0; padding: 0;">
<!--[if (gte mso 9)|(IE)]>
<v:oval xmlns:v="urn:schemas-microsoft-com:vml" fill="true" style='width:32px;height:32px' stroke="false">
<v:fill type="tile" src="[URL]" />
</v:oval>
<![endif]-->
<!--[if !mso]>-->
<img style="border-radius: 16px;" width="32" height="32" src="[URL]" />
<!--<![endif]-->
</td>
Then using conditional statements I can supply the VML shape to Outlook and a regular <img> element to everyone else that supports border-radius.
(Essentially anything other than outlook according to caniemail.com)
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'm very new to VBScript or any scripting for that matter.
I want the script to check whether an image is loaded. Below is the script up to the point of where I'm stuck.
strURL="https://www.Test.com/"
strUser="******"
strPass="******"
Set oIE = WScript.CreateObject("InternetExplorer.Application","IE_")
Timeout=20 'seconds
oIE.visible=1 : BeginTimer = Timer
oIE.Navigate strURL
i=0 : bElementsLoaded=false
Set CODA_Element_1 = Nothing
Do While (oIE.ReadyState<>4 Or Not(bElementsLoaded)) And i < Timeout
WScript.Sleep(1000):i=i+1
On Error Resume Next
Set CODA_Element_1 = oIE.Document.getElementById("user")
Set CODA_Element_2 = oIE.Document.getElementById("password")
Set CODA_Element_3 = oIE.Document.getElementById("next")
If (Not(CODA_Element_1 is Nothing)) Then
bElementsLoaded=true
End If
On Error Goto 0
Loop
CODA_Element_1.value=strUser
CODA_Element_2.value=strPass
CODA_Element_3.Click()
From here on in i have no idea.... The image i want to check is loaded is /codaprod/images/portal.jpg
In the below snippet of source code
<DIV id="esisplitpanelower" class="scroller" style="height:100%; overflow:auto">
<TABLE cellpadding=0 cellspacing=0 height="100%" width="100%">
<TR><TD width="100%" height="100%"><TABLE cellpadding=0 cellspacing=0 height="100%" width="100%">
<TR><TD align="center" valign="top" width="100%" height="100%"><TABLE cellpadding=0 cellspacing=3 align="center" valign="top" height="100%" width="100%">
<TR><TD align="center" width="100%" height="100%"><TABLE cellpadding=0 cellspacing=3 align="center" height="100%" width="100%">
<TR><TD align="center"><IMG src="/codaprod/images/portal.jpg" title="Home Page">
</TD>
</TR></TABLE>
</TD>
</TR></TABLE>
</TD>
</TR></TABLE>
</TD>
</TR></TABLE>
</DIV>
Can somebody please show me how to check if this image is loaded? If loaded display msgbox "Working!" and if the image is not loaded then msgbox "Not Working!"
One way is to use <img>'s onload() method.
<script type="text/vbscript">
sub loadImage()
msgbox "Image is loaded"
end sub
</script>
<img src="anyold.gif" onload="loadImage">
W3Schools gives a JavaScript version of that same thing: http://www.w3schools.com/jsref/event_img_onload.asp
You can check using the image object's complete property
http://www.w3schools.com/jsref/prop_img_complete.asp
Here's an example:
For Each pix In oIE.document.images
Do Until pix.complete=true
WScript.Sleep 10
Loop
Next
You need to tailor this to your precise image, possibly comparing the image object's src property for checking the precise image you want to know if it is loaded or not.
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