I'm trying to lay out a responsive email template to work across all major clients, and I'm just about there, but since Outlook doesn't support max-width, and I have all elements set to width: 100%, it's putting my content all the way to the left since it's left-aligned. I can center the header and footer with align:center or margin: 0 auto.
What can I do to prevent my content from going all the way to the left without giving anything a fixed width or using max-width (which I am using, but Outlook just ignores)?
Sounds like you are referring more to a "fluid" layout (basing off percentage) rather than a "responsive" one (where you would use media queries to specify styles based on width of display device).
Since setting a pixel value for the margin-left wouldn't make a lot of sense, why not set the margin-left to a percentage value?
margin-left: 4%;
Otherwise, you might want to take a look at the following resource found on MailChimp regarding media queries.
http://templates.mailchimp.com/development/media-queries/
Try this and use media queries to adjust the width percentages at different screen sizes if needed. Just keep in mind that your media queries won't take effect in these email clients.
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#252525">
<tr>
<td align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%">
</td>
<td align="left" width="80%" bgcolor="#FFFFFF">
<br>content<br>...<br>
</td>
<td width="10%">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
Related
I've created a mailer view in rails, which displays great on all clients except outlook. The limiting factor is the lack of the 'position' attribute.
I'm trying to place an image on top of a table row, so that the top and bottom edges sit above/below the row. I've achieved this for other email clients, by putting the image in another row above this, making the position absolute, and giving it a negative top margin. I can then bring the image down and overlap the bottom row as much as I like by adjusting the top margin value. (See Code)
<tr>
<td>
<%= image_tag(attachments['logo.png'].url, style:"text-
align:left;height:100px; width:100px; margin:-30px 10px 10px 10px;
position: absolute") %>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 125px;">
Some Text
</td>
</tr>
position: absolute does not work in outlook, what would be a good alternative to help me achieve this?
Thanks!
You won't be able to achieve this in the same way as position:absolute.
Your alternatives are:
Split the image up into three and have each slice in each of the three sections.
Make the three row sections into a background image and place the image in as normal.
I understand neither of these are ideal but you're limited with Outlook and the usual margin and position tricks won't work.
With the options I've suggested, rather than restructuring your code, you could simply add a new block just for Outlook, using Outlook specific conditional statements:
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Outlook content</td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-- -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>All other clients</td>
</tr>
</table>
<!--<![endif]-->
In the following JS-Fiddle example, why the inner table expand to the width of the screen, when its container has a max width property set?
<table bgcolor="white" cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%">
<tr>
<td style="max-width:580px; border: solid 1px green">
<table bgcolor="red" cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%">
<tr>
<td>
MY TEST CELL!!
</td>
</tr>
</table>
<td>
</tr>
</table>
<table> element uses css property display: table which doesn't behave "normally". If you want your elements to behave as expected, use display: inline-block or display: block. This way your element will actually pay attention to your max-width declaration.
However, it seems you are trying to use tables to layout your content, and this is a bad practice. Tables are used for tabular data only. If your content is a paragraph, use <p>, for instance.
Also try to avoid inline styling, always use external css files.
The structure of my table is
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
<h1 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:16pt;font-weight:100; margin-bottom:10px;">Simpilfied IT management for any enterprise</h1>
<h2 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:14pt;font-weight:100;">Gain control over any hybrid cloud with our cost-effective all-in-one cloud solution</h2>
</td>
</tr>
</table>
aand I want the image inside the first cell to have the same height as the second cell (so that the image blends into the background color of it. I know there are alternative ways of doing this, but I'm constrained since this is an HTML email for Outlook).
Right now the right cell is always having a height of 196px, even if I strip its contents to nothing:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
</td>
</tr>
</table>
The right cell is always 196px and this causes the left cell to be the same height. Makes no sense.
If you add a display: block to the style of your image it will be fixed.
<img src="//placehold.it/404x192" style="width:404px; height:192px; display: block" />
The first answer should help you to understand why
EDIT: Actually, you dont need nothing but the display block and the image sizes.
What are the dimensions of your image?
I don't think HTML is "smart" enough to stretch your image to fit to your exact request.
Maybe you should try resizing your image in paint/photoshop to a dimension that has the same height/width ratio as 404:192 and see if that helps.
I am trying to send html emails with images. Images look good in all email clients but in outlook they are too wide. How to fix max-width of image?
<table id="cg-cmgxsgg" class="widget widget-image " width="580" data-widget-code="email-image">
<tbody>
<tr>
<td align="center">
<div><img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" alt="" style="float: none; margin-left: auto; margin-right: auto;"></div>
</td>
</tr>
</tbody>
</table>
Regardless of CSS support or HTML attributes, the main factor that is causing the issue in Outlook is the actual size of the image. Outlook usually ignores whatever HTML sizing (width= or height=) or CSS styling (width:, height:) and goes off of the embedded information in teh image. This is all based off DPI setting as well as the renderings of the Word HTML engine.
Mailchimp solutions
Below is snippet explaining the issue in more detail from here
"This issue usually happens when you are using a picture other than 96dpi.
When inserting a picture, Outlook will rescale the image as if it was a 96dpi image. This means that if you have a picture of 150dpi with a height of 88px, it will be displayed as an image of 56px high;
88px/150dpi * 96dpi = 56px
It even gets worse; upon sending, Outlook will convert and compress (re-render) the images to 96dpi with the new dimensions permanently! This means that all the "detailed" picture information is lost and you'll be sending an image of 96dpi which is 56px high. This is of course a severe and very visible quality loss.
If your picture is less than 96dpi, then the opposite happens. A picture of 88px high with a dpi of 32 would then result in a 96dpi image of 264px high. So the result will be a very large image (but this time you can resize it back without the image becoming blurry).
This is a long outstanding issue/function/design choice which goes back all the way to Word 6.0 from 1993."
For setting a max-width on images for Outlook I add a Width="600" attribute to the img tag. Note the lack of px on that size, with px it doesn't work and it must be on the img tag, not any parent element.
E.g.
<img width="600" src="http://www.myimage.co.nz/myimage.jpg" alt="My Image" />
On a side but related note I use a width of 280 for side by side images in a 600 width table. This is because Outlook adds padding (or maybe margin) and they would stack if you made them both 300.
Couple of things, I'd refrain from using floats etc in your emailer code and also would remove that wrapper div, with emailers you've really got to go with simple table markup. Also try to avoid things like p tags etc as they create additional space etc.
For your actual question I'd try something like this, I'd set a height on my image and ive it display:block
<table id="cg-cmgxsgg" class="widget widget-image" width="580" data-widget-code="email-image" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center">
<img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" height="200" alt="" style="display:block;">
</td>
</tr>
</tbody>
</table>
max-width is not a supported CSS style in Outlook 2007. (Neither is float, apparently.) Outlook is notorious for providing very limited CSS support.
Your best solution is to specify a smaller width (and height) in the HTML attributes:
<td align="center">
<div><img src="..." width="500" height="300" alt="" style="margin-left: auto; margin-right: auto;"></div>
</td>
I'm a bit late to the party (got here via Google). What works for me, and what I didn't see in the answers, is conditional comments for Outlook.
They work like this:
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tbody>
<tr>
<td>
<img align="center" alt="" src="[image source here]" width="[desired width here]">
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
What your're doing here is essentially wrapping your image table in another table with fixed width, but only for Outlook.
MailChimp has a nice reference you should check out if you run into problems with Outlook: https://templates.mailchimp.com/development/css/outlook-conditional-css/
Hope this helps some fellow Googlers!
I am using this with perfect success in Outlook 365 (2022):
<img src="https://picsum.photos/1000/1000" width="100%" style="width: 100%;">
I have a table nested as such:
<table>
<tr>
<td>
<table>...
</table>
</td>
</tr>
</table>
More precisely:
some style info:
div.centered{
text-align: center;
height:100%;
}
div.centered table.centeredT {
margin: 0 auto;
text-align: left;
max-width: 781px;
overflow: hidden;
height:100%;
}
Layout:
<table style="height:100%; min-height:100%;" class="centeredT" border="1" cellpadding="0" cellspacing="0" width="781px" >
<tr>
<td style="vertical-align:top; padding-bottom:7px;padding-right:5px;width:33%;height:100%;">
<table style="table-layout:fixed;height:100%;min-height:100%;border:solid 1px black;" border="0" id="Table1" cellspacing="0" cellpadding="0" class="verdanaSmall" width="257px" >
<!--this first row is simply a spacer row because I am using table-layout:fixed attribute -->
<tr>
<td width="80px"></td>
<td width="175px"></td>
</tr>
<tr >
<td colspan="2" style="height:100%;">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-top: solid 1px black; border-bottom: solid 1px black;">
<tr>
<td style="text-align: left; vertical-align: middle;"> 1.) </td>
<td align="center" height="20">
<a href="results.asp?pubid=31422&date=10%2F11%2F2010&ttype=eqq"target="_top">
<font face="Verdana" size="2" color="#22476C"><b> Abilene Reporter News </b></font>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><font face="Verdana" size="1" color="#22476C"> Monday, October 11, 2010 </font></td>
</tr>
<tr>
<td align="center" colspan="2" height="100%" id="imagetd">
<a href="../PDFView/PDFView.aspx?pgID=32065209&adID=96332396&ref=50" target="_blank">
<img src="/pages/201010/11/31422/thumbs/A000300001H.gif" style="border: solid 1px black;" alt="" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The reason for this is that the page is filled dynamically and the inner table is inserted inside a data loop. Anyway, the question is that the inner table is not filling 100% of the available height of the encapsulating td cell. I have set the inner table height, via css, to 100%, the encapsulating table, and also the body tag and so on up the chain. If you look at the page in firefox and opera it lays out perfect but IE does not seem to be obeying the height specifics and just making the table big enough to display the data, does anybody know of a hack/fix for IE, or a way I can correct this..?
As the problem describes: the td-element itself does automatically stretch to 100%, but (in IE) for some reason its height is not passed to its children as 100%.
The solution is quite simple: just add 'height: 100%' to the td-element that is parent of the nested table. This way 100% height will be passed to the td's children when using height: 100%; on them.
It fixes the problem in IE and doesn't seem to cause any problems in other browsers (tested on new browsers Chrome, Firefox and IE).
NOTE: setting the td's height to 100% with an nested table may cause the cell to expand too much. In that cause the height may have to be adjusted to compensate the height of the other rows. With CSS3 this can be easiliy achieved with calc(100% - [height of other rows])
PS: I'm aware that the above question is really old, but I stumbled upon this while googling for a simular problem and it seems no (correct) answer has been provided to this one. For others who will find this page just like I did, it might be helpfull to find an
answer.
Try set padding:0px; on cointaner and inner table.
Ok I havent tested anything but it doesnt look like you have set the inner table height to 100%. You have a class table.centeredT but you have not specified the class on the table. Nor have you specified height: 100% on the inner table itself. Give me a few more minutes and I will try to achieve this on jsfiddle.
Edit: One thing which did just occur to me - which wont be causing the problem but just decreases the code a bit - is that you could use the col attribute instead of an extra row at the top. I have heard that this isnt 100% supported, but I have never had a problem with it personally.
Edit: Ok I have no idea... spent ages on this and not getting anywhere. I personally havent used tables in months - I am good enough at divs, float and clear and alike that I can easily make what looks like a table without a table. If I had to display data in a meaningful way then I would use a table. Is this for displaying data, or can it be displayed just using divs / float / clear?
You need to have fixed heights of the elements that should be spanned to 100% height. Fixed heights means you'll have to set them in pixel height instead of percentage. See this SO question and solution with similar code:
Iframe { height:70%;} not working in IE 8 and Firefox