I have a very annoying issue with an HTML email I have designed and built when viewed in Outlook 2013. The issue arrises when a user with DPI Scaling set to 'Medium (125%)', and it makes all my images 125% larger than they should be, even though the width and height are set on the tag, in the style of the tag and on the tag that houses the image.
My code:
<td align="right" valign="top" class="socialIcon twitter" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; width: 25px; height: 25px; padding-right: 8px;">
<a href="https://twitter.com/company" target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<img src="http://www.example.com/email-campaigns/images/twitter-icon.png" width="25" height="25" alt="Follow us on Twitter" style="border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: 25px; height: 25px; display: block;">
</a>
</td>
The image above displays at 31px by 31px, when it should be 25px by 25px.
Does anyone know a work around for this?
Thanks.
* EDIT *
Added a diagram to better show the issue.
The tables stay the same width, but the images increase and break the layout.
DPI Scaling makes the following changes:
Widths and heights specified in HTML attributes remain pixel values.
Widths and heights specified in VML code remain pixel values.
Other pixel values (px) are converted to point (pt) values instead. This is
where the problem comes in.
To fix these issues,
Use inline styles and px units on tables.
You'll want to define the height using the attribute, for Gmail. Then define the height and width inline, using px. Tables that have a percentage-based width don't need any treatment, as they scale well already.
<table>
<tr>
<td height="500" style="width: 500px;height: 500px;">
</td>
</tr>
</table>
Add this to your code to make VML scale.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
Use MSO Magic for cellspacing and cellpadding.
Using these inline styles will allow you to create scalable cellspacing and cellpadding.
<table cellspacing="10" cellpadding="10" style="mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px">
...
</table>
There is no way to control this or manipulate it as a sender. The image size is based off the DPI of the image and the DPI of the display setting on the end users computer. This makes it impossible to build for this unless you are absolutely certain on the DPI your recipients will have set on their computer for all time.
Your best bet is to let it scale, and just adjust your design to scale with the increase. The best way to do this is to set anything in two column into TDs with a set value (use conditional mso when want table stack responsive design) as this should be scaled as well, making it so basically it is equal to someone just zooming in on your email. It will help keep it proportional, rather than enlarge only portions of the email.
Some reference points on how to handle outlook dpi scaling:
Email on Acid: https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013
Litmus: https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013
You may wish to create an anonymized version, generic text, pictures, etc. This helps you and the other people who follow up on the issue later... like me today having a similar issue...
Related
My email template has two media queries. I have a call to action button as an image. When the code is rendered in Outlook the image-button in the larger media query looks fine, but the image widthxheight in the smaller media query does not change when viewing the rendered email in Outlook It does render fine for other mail clients, OS).The native size of the image is 2x that of the declarations in the CSS.
I've tried -
max-width in the CSS.
width attribute in the HTML (but this applies across all media queries).
CSS -
#media screen {
.image-responsive {
width: 320px;
height: 68px;
}
#media (max-width: 520px) {
.image-responsive {
width: 260px;
height: 56px;
max-width: 260px;
}
HTML -
<p style="text-align: right;margin: 0;padding-top: 20px;">
<a href="#" style="color:#fff; text-decoration: none;">
<img src="URL/images/btn-securepayment-2x.png" alt="Secure Payment" class="image-responsive">
</a>
</p>
The max-width element is unsupported in Outlook.
Outlook uses Word for rendering message bodies, so you need to follow strict rules if you want your markup to be rendered correctly. You may find the list supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following articles:
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)
Outlook 2007+ unfortunately doesn't media queries (although older ones did). As Eugene mentioned, Outlook 2007 changed their rendering engine from IE to MS Word which causes rendering issues for very commonly used CSS as well.
Below is an example of how media queries can be used to change elements in an email when viewed on different screen sizes.
#media screen and (max-width: 520px) {
p {
text-align: left !important;
margin: 10px !important;
padding: 0px !important;
background-color: #000000 !important;
}
}
<p style="text-align: right;margin: 0;padding-top: 20px;color:#ffffff; background-color:#ff0000;">
wow this is fun
</p>
Lastly, here is a resource from Campaign Monitor which gives in details which CSS works on which email client.
There are many questions on this topic already posted so sorry for posting another. However, none of the others that refer to my situation -- vertically aligning a row of images of undefined height, rather than a single image -- have received a reply that accomplishes what I need to do. As far as I can tell, Kizu's first solution here: How to vertically align an image inside div should be the thing, but alas I can't get it to work.
So, I have a container div. I can specify a height for this div if necessary. I can also place this div in another div if necessary.
Inside the div, I want to place a row of images of varying heights. These images should be vertically centered in relation to each other (not just in relation to the container div).
I cannot use background images in this case (the images are being placed within a text widget for easy replacement purposes).
As far as I can tell, I also cannot use display: table on the container div and display: table cell on my images, because the table cell must have a defined height, and my images are of varying heights.
Here is my code -- I've got a couple of extra divs (#footer-single-widget and .footer-single) to achieve the overall centering and padding I want, so I'm including these as well in case one of them is affecting the subsequent divs:
<div id="footer-single-widget">
<div class="footer-single">
<div class="textwidget">
<div class="media">
<img src="#image-1" width="103" height="36" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />
<img src="#image-1" width="103" height="26" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />
</div><!-- end of .textwidget -->
</div><!-- end of .media -->
</div><!-- end of .footer-single -->
</div><!-- end of #footer-single-widget -->
And the CSS:
#footer-single-widget {
width: 100%;
}
.footer-single {
text-align: center;
max-width: 980px;
margin: 0 auto;
}
#footer-single-widget .textwidget {
display: block;
height: 40px;
width: 980px;
}
.media {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.media img.alignleft {
display: inline-block;
vertical-align: middle;
max-height: 40px;
max-width: 200px;
}
The frustrating thing is at some point I achieved exactly this effect -- then decided I didn't need it (all my images at that point were the same height) and deleted the code I had written. Now I need it again and don't have the faintest memory of what I did! But I know it's possible... somehow. Thanks for your advice.
So, I have a div, and inside it I've got 3 things;
1. An image (a big left quotation mark)
2. a live text paragraph
3. another image at the end (a big right quotation mark).
The first image, when it's put in the div, causes the text to wrap, which is great. It appears to be part of the paragraph.
My issue: I can't get the second image to be 'inside' the paragraph at the end. It is pushed below the paragraph area. I want it to 'wrap' with my paragraph text.
#textarea {
width: 185px;
height: 70px;
padding: 49px;
}
#textarea p {
font-size: 15px;
font-weight: bold;
color: #4D6F79;
line-height: 230%;
text-align: center;
-webkit-margin-after: 0em;
-webkit-margin-before: 0em;
}
<div id= "textarea">
<img src="images/leftquote.png" width="36" height="43" alt="left quotation" align="left"/>
<p>The kids really loved it!</p>
<img src="images/rightquote.png" width="32" height="20" alt="right quotation" align="right"/>
</div>
Any help/ideas would be much appreciated! Thanks!!
I am not exactly sure what you mean by you want your second image in your paragraph but I know a decently easy and cheap way to use css to relocate your second image to be where you want...
First put an ID on your image:
<img id='image2' src="images/rightquote.png" width="32" height="20" alt="right quotation" align="right"/>
Then use CSS to reposition it:
<style>
#image2 {
position:relative;
top:-50px; // These numbers are just examples you can change them to anything to properly reposition your text.
left:20px;
z-index:-1; //depending on whether you want your image infront or behind the text you can change your z-index to either a positive number e.g.(5) or negative number e.g.(-2).
}
</style>
If you are worried about different formattings across different browsers they would not appar to be hugely different just off this positing but there is another way to do this if you are ok with wrapping your text around your image using overflow. Ex:
<div class='floating-eg'>
<p>The kids really loved it!</p>
<img class='left' src="images/rightquote.png" width="32" height="20" alt="right quotation" align="right"/>
</div>
<style>
.floating-eg {
overflow: auto;
}
p {
overflow: auto;
}
</style>
You can see a related example of wrapping here.
there's a container with background-color and padding specified. there's an image inside it. in a full screen browser window it looks like as it should look like:
http://img263.imageshack.us/img263/4792/61536769.png
but after resizing the window (window width is less than the content width) and the horizontal scrollbar appears, if i scroll it right, i can see the background ends where the window ends:
http://img845.imageshack.us/img845/7370/11506448.png
here's the code:
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background: pink; padding: 32px; display: block;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>
in ie8 it looks right, the padding is treated as it's part of the content. in firefox and in opera it isn't, even if i use the "-moz-box-sizing: border-box;" (and correct doctype and everything...) so i don't really know what should i do. i usually did it with margin for the image but this time that can't be a solution (the actual thing is different than this example, but it shows the exact problem).
thanks for your help in advance :)
Add an extra div that wraps your existing div and do float:left.
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background-color: pink; width:100%;float:left;">
<div style="background: pink; padding: 32px; float:left;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</div>
</body>
Edit: Removing display: block; as that's irrelevant when you have float.
What's going on is that the div isn't expanding to wrap around the image, since the image has a fixed width, but the div doesn't (and is therefore defaulting to 100% of the parent, which is body/html at 100% of the viewport). If you look at it with Firebug, you can see that the image is going outside of the bounds of the div and its padding.
I've tweaked the CSS in this jsFiddle to get the background to expand to the image. It should at least get you started. Basically, what I did was add overflow-y: auto; to the div, which expanded the background.
One thing you can do in this case is to put a specific width on the div as well:
<body style="margin: 0; padding: 0;">
<div style="background: pink; padding: 32px; display: block; width: 640px;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>
You can do that in this case because you already know the width of the contents. Of course, if you need a dynamically sized div this might not work for you.
I was going to suggest putting margin: 32px on the image instead of padding: 32px on the div, but when I tried it that didn't help either. Bizzare.
I`ve tried a couple of things even using the CSS clip, but not getting it proportionally fit in the thumbnails here http://giantmango.com/arttest2-2510.
In CSS, what is the best way and how would I proportionally resize an image to display in dimensions of a 200px (width) x 150 (height) thumbnail?
Just checked firebug and for some reason all my img tags are always set to a height of 200 even though I have max-height set to 150...
Use max-height and max-width. Beware that they are broken in older versions of IE. You can do
#myImage: {
max-height: 150px;
max-width: 200px;
}
EDIT: #tokiowp: try this. It should work (it surely does for me). So the problem with your layout comes from additional properties you may have set.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img style="max-height: 150px; max-width: 200px" src="giantmango48.jpg" />
</body>
</html>
EDIT: it turns out, looking at your source, that you are actually declaring your images with something like
<img src="http://giantmango.com/wp-content/uploads/giantmango78.jpg" alt="" title="giantmango78" width="200" height="200"/>
Of course what you need is to remove these declarations of width and height.
css:
#thumb {width:200px; height:150px;}
#thumb img {height:100%; width:100%; margin:0 auto;}
html:
<div id="thumb"><img src="tb01.jpg"></div>