I've seen this problem touched on in many questions but none have been specific enough to help me. So I hope it offends no one if I simplify it and ask again. Hope springs eternal!
Is it really IMPOSSIBLE to control the width of an image embeded in an email when Outlook renders it? I.e. control the width of an image for which the html code is
<img src="cid:seal">
I.e. when the html code expects an embedded image instead of one stored elsewhere.
[Note: "seal" is the content ID I assigned when creating the MimeBodyPart with the embedded image].
Details:
I use a Javamail application to send a multi-part email message. The body part is an html document. Another MimeBodyPart carries the image used in the html doc. I've simplified the html test to nothing more than a two column table with the left column for the image and the right column for text.
And absolutely NOTHING I have tried has been able to control the size of the image when opened in OUTLOOK.
The image is always what I assume must be some native size for the image ... which is too big ... so it forces the first cell to be more than 15% wide. Or if I give the cell a fixed width the image overflows the box, i.e. get's clipped.
I put the basic code stripped of all font styling colors etc. below.
I have tried every combination of using width attributes and css style properties on the img tag. I've wrapped the image in another table ... or wrapped it in a div block inside the main table cell ... and even wrapped it in a div block inside a table cell inside the parent table cell. And I've tried specifying widths in fixed pixels and %'s.
It would really be nice if we all knew for sure if this is simply IMPOSSIBLE with Outlook.
Or if it is possible possible, to publish sample code that works. [It's hugely attractive to have the email open its images immediately, and not rely on the reader downloading them.]
NOTE: I seem able to control width when I load the image from an outside source afterwards, i.e.
Thanks for any help.
<html>
<head>
<meta name="viewport" content="width=980, initial-scale=1">
<title>Test Email</title>
</head>
<body style="width:100%; border:0;margin:0;padding:0;">
<table align="center"
style="width:980px; border-collapse:collapse;
margin-left:auto; margin-right:auto;">
<tr style="border:0; margin:0; padding:0;">
<td style="width:15%; border:0; margin:0; padding:0;">
<img src="cid:seal"
style="width:6em; height:auto;">
</td>
<td style="width:85%; margin:0; padding:.5em 0em 0em 0em; border:0;">
Some Titles and stuff
</td>
</tr>
<tr>
<td colspan="2" style="border:0; margin:0; padding:1em 1em 0em .5em;">
<p> 1st paragraph
....
<p> last paragraph
</td>
</tr>
</table>
With help from Eugene above, I discovered at least one good solution.
<img src="cid:seal" width="300" or "300px" of "15%"> DOES NOT WORK.
But when I ditched the quotes this worked
<img src="cid:seal" width=300 height=300>
It does of course mean setting width in % is still a problem since it requires quotes.
But I'll take what I can get. Email now pops open with logo without the user needing to download pictures. AND ... this css body selector also works rendering the background with an embedded image. [I stored the background image with a Content ID of"bkg".]
AGAIN ... unlike the img attribute src="cid:id" that uses quotes, url() requires the id w/o quotes.
<body style="background-image:url(cid:bkg);
background-repeat:repeat;
width:100%;
generic-family:Sans-serif;
font-family:Verdana;
border:0;margin:1em 0 1em 0;padding:0;">
Outlook uses Word as an email editor. The following series of articles provides reference documentation related to supported and unsupported HTML elements, attributes, and cascading style sheets properties:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
You can design the page in Word and then save the resulted document as a web page. Thus, you will find the required HTML markup to use.
Related
On my site I have images in the travel report, some of which you can click on and are therefore between the a tag of a link. This works well on the site. But if a PDF is made of it, the images with links will be placed behind the text.
We received the code, Robin immediately walked over to it and came back with the house key.<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left"> After dinner to the apartment.
On the website: example HTML/PHP - result in html (pic)
On PDF via dompdf: example PDF - result in pdf (pic)
Does anyone know how this can be solved so that the image also appears between the text and not after the text?
Maybe you can set a z-index value for your image's CSS like this:
img {
z-index: 1;
position: relative;
}
Or try putting the
<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left">
in a block-level element. Wrap a <div></div> around it.
Hope it helps!
I'm working on an email that has several dividers. The character in the table cell gets deleted when edited through the wysiwyg editor. I tried using the &zwj character to solve that issue and it works on most email clients but outlook 2016 is showing a line above the divider.
Screenshot
Is there a better solution than this?
<tr>
<td bgcolor="#222222" style="font-size: 1px; line-height:16px; color:#222222"></td>
</tr>
Outlook 2016 has a problem with adding those lines in. Other developers have reported that the issue is down to Outlook 2016 converting white space.
You could try targeting Outlook and collapsing the borders. Just add this:
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0; }
</style>
<![endif]-->
It’s worth noting that depending on how you structured your email this may not be the right fix for you. It works on some emails, but can have an adverse effect on the overall rendering of the design.
You can also try matching the background. It's more of a cover up than a fix. Lines inherit the color from the <body> tag. So, by setting the background color of the <body> to the same color as our problem section, we essentially cover up the lines. They’re still there, yes, but no one will see them. We also want to only target the problem clients. There’s no need to change the background color of clients that render the email correctly.
Simply add this to the <head> of your email with the background color changed to match the problem section.
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body { background-color:#123456 !important;}
</style>
<![endif]-->
More info about lines in Outlook here: https://www.emailonacid.com/blog/article/email-development/how-do-i-get-rid-of-the-lines-in-outlook-emails/
Have you tried using border instead of background to set the color?
<tr>
<td style="font-size: 1px; line-height:0; border-bottom: 1px solid #222222;"></td>
</tr>
If found that even when ESP's don't mess with and characters, Outlook can sometimes interpret height and line-height oddly. If if we're using mso-line-height-rule: exactly;.
I use border in my own work and haven't found an issue yet.
Cannot replicate this at all. Any chance of a view of your complete template code?
There could be a wider underlying issue with your HTML.
Alternatively, change your declaration to
That is the correct HTML version of a zero space character.
zwj also doesn't display correctly in Litmus when I test your snippet in one of my templates.
Is it possible to have an image automatically embedded in an email, which when opened on a Blackberry will show by default without the user having to open it seperately?
I'm constructing a HTML email eshot that will be opened on Blackberry devices with the below HTML:
<html>
<style>
body {background-color: Black; color: #fff;}
</style>
<body>
<table align="center" cellpadding="4" cellspacing="4">
<tr>
<td><img src="cid:Eshot.jpg" /></td>
</tr>
</table>
</body>
</html>
This works when viewed Outlook but I'm not sure whether I can get it to render on Blackberry devices without it effectlvely being an attachment. I'm aware that Blackberry devices handle HTML emails in there own unique way, but the client it is being produced for has apparently had emails in the past where it has been embedded but I'm not sure what I can do if anything to force this.
I had a similar problem. You can find here how I solved it and try if it fits your needs. Shortly, you need to convert the image in a bytestream and include it in your html body as:
... <img src="data:image/bmp;base64,gzfddr56utggtlytlgg....jigkgfjytdjyr"></img> ...
where:
gzfddr56utggtlytlgg....jigkgfjytdjyr
is the encoded image bytestream.
I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :
<img id="img1" class="img1_1" src="hello1_1">
<div class="textDesc">HELLO1_1</div>
</img>
Though the div is appended to img tag , but I cant see the text "HELLO1_1" on the image.
Please can anyone help me?
If you need the source code I can share it with you.
Here is the link to test the scenario :
http://jsfiddle.net/XUR5K/9/
An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.
Example:
<div style="position: relative;">
<img />
<div style="position: absolute; top: 10px;">Text</div>
</div>
That's but one example. There's plenty of ways to do this.
The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.
I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.
Rules of good tone.
Use null source in IMG tag.
Use CSS content:"" for WebKit browsers.
Insert element through JavaScript. Clear in HTML does not affect.
Also you can use pseudo elements.
Example: https://github.com/Alexei03a/canvas-img
I have following snippet to load the table generated by jqGrid.
<div id="result">
<table id="resultTable">
<tr>
<td />
</tr>
</table>
</div>
My other css interfering with jqGrid css, it causes the "caption layer" (The orange color bar at the very top of the table) height becomes very large and overlapped with other part of the page. Sorry, post image is not allowed.
The height is about 10 times larger and seems contains 3 rows with slightly different color in each. If I remove all my css, the "caption layer" display properly, but I lost all the headers, footers etc. I tried the suggestion by Tony in the link at jgGrid forum,
<style>
#result table.scroll thead th {height:30px;}
</style>
and suggestions by others, but none of them works for me. Please help me to set the "caption layer" height overwrite.
I suppose that you have some problem with CSS style "float:left" used somewhere on the page. I recommend you to look at the answer which solved close problem. If you have the same problem you should add to the <div id="result"> an additional style definition which set the floating like style="float:left" or which remove it like style="clear:left", style="clear:right" or style="clear:both".
If you have no "floating" problem and the title div will be just increased to some unwanted height you can fix the problem by setting additional CSS statically or set the height dynamically. The answer
shows how to find the caption of the grid and get its height. In the same way you can set the height.