I have these images. they work fine in Gmail , but when I see in outlook , then all the 5 images comes in single <tr> and extends the default width of table.
What I want is , first four images should be in the center of first line and if there are more images then , it should be in new line. but in the same <tr>. I don't want separate <tr>for the same. I have done this. It looks fine in Gmail. but it extends its width in outlook which I have to make them correct. I have read article regarding the same. but didn't get too much.
So , It would be great , If I get help for this issue.
Thank You.
<table width="600" cellspacing="0" cellpadding="0" border="0" style=" background: #fa4b00;margin: 0 auto !important; padding: 0px; max-width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; text-align: center;" >
<tr>
<td height="20"></td>
</tr>
<tr>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600; ">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: white; "> XYZ </p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break: normal ; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px; word-break: normal ; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;">XYZ </p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>
<p style="padding-bottom: 30px;"></p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>
<p style="padding-bottom: 30px;"></p>
</td>
</tr>
</table>
You're setting the TDs to display:inline-block, which doesn't really make much sense for a table element. The whole point of a table cell is that it behaves like a table cell.
Maybe that's what the issue is; if you're using an Outlook app or whatever it'll have a different rendering engine to Chrome. So that rendering engine could decide to ignore display:inline-block on table cells.
I'm pretty sure if you just removed the table stuff and wrapped each image in a DIV instead it would work reliably.
jsFiddle
Related
How can I fix my margin and padding section in the email template to properly align my images in different columns ?
I have inserted a full image and also partial code below. Thank you.
<tr>
<td valign="top" align="middle" >
<table border="0" cellpadding="0" cellspacing="0" width="100%;
background-color: #ffffff; padding; 20px;">
<tr>
<td bgcolor="#ffffff" style="display: inline-block; max-width: 270px; width: 100%;" align="center">
<img src="https://i.postimg.cc/sgw9MVx8/jug.png" alt="" style="max-width: 268px; width: 100%" border: 1px solid: #d5d5d5 />
<h3 style="margin: 10px 0px; font-family: sans-serif; font-size: 20px; color: #000000" > Jug </h3>
<p style="margin: 0; font-size: 16px; color: #444444; margin-bottom: 10px; "> 10% discounts</p>
</td>
<td style="display: inline-block; max-width: 20px; width: 100%" >
</td>
<td bgcolor="#ffffff" style="display: inline-block; max-width: 270px; width: 100%;" align="center">
<img src="https://i.postimg.cc/CK9LqX9G/apple.jpg" alt="" style="max-width: 268px; width: 100%" border: 1px solid: #d5d5d5 />
<h3 style="margin: 10px 0px; font-family: sans-serif; font-size: 20px; color: #000000" > Apple </h3>
<p style="margin: 0; font-size: 16px; color: #444444; margin-bottom: 10px; "> 10% discounts</p>
</td>
</tr>
</table>
</td>
</tr>
Both Images resolution should be of the same size.
This is my code
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:40px;line-height:2px;color:red;">◖</td>
<td style="width:80px;height:30px;background-color:red;"></td>
<td style="font-size:40px;line-height:2px;color:red;">◗</td>
</tr>
</table>
Fiddle Example
What I want to do is to appear my table content as the div below ( with border radius )
<div style="width:120px;height:30px;background-color:red;border-radius:50px;"></div>
I have to do it with table like this because this code will use in html email for Outlook Desktop client which doesn't support border-radius .
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<div style="padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
background-repeat:no-repeat;
transform: rotate(180deg);
height: 186px;
width:90px;
display:inline-block;
">
</div>
<div style="width: 212px;height: 179px;background-color:#c60000;display:inline-block;"></div>
<div style="
padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
height: 186px;
background-repeat:no-repeat;
width:90px;
display:inline-block;
background-position: 0px 7px;
"></div>
</tr>
</table>
JSFiddle
Use images instead of characters.
Completely based on div.
div.my-button{
padding: 12px 18px 12px 18px;
border: 1px solid #e9703e;
background-color: #EB7035;
border-radius: 10px;
font-size: 16px;
margin-top: 20px;
width: 119px;
}
div.my-button a{
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
}
<div class="my-button">
I am a button →
</div>
I want a transparent text layer to the bottom of image.
<table>
<tr>
<td style="vertical-align:top; background:#ffffff;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center; background: #FFFFFF;">
<img style=" padding-top:10px; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" >
<!--
<p style=" width: 100%; text-align:center; font-size:10px;word-break: break-all; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; background: #EE163A;">Mr. Mahesh Murthy</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: break-all; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; background: #EE163A;">
Co-founder at seefund
</p>-->
</td>
</table>
I don't know how to do without using position property.
PS: I am making HTML Emailer , so have to use table tag and inside css only. Can not use div , position property.
Thank You.
<table>
<tbody>
<tr>
<td style="vertical-align:top; background:#ffffff;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center; background: #FFFFFF;">
<div style="width: 110px; height: 110px;">
<img style=" padding-top:10px; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110">
<p style="width: 100%;text-align:center;font-size:10px;word-break: break-all;/* text-transform: uppercase; */max-width: 110px;padding: 0px 5px;margin: 0 auto;background: rgba(45, 41, 42, 0.5);color: white;position: relative;bottom: 25px;">Mr. Mahesh Murthy</p>
<p style="width: 100%;text-align:center;font-size:8px;word-break: break-all;/* text-transform: uppercase; */max-width: 110px;padding:0px 5px;padding-right: 5px;margin: 0 auto;position: relative;bottom: 25px;background: rgba(45, 41, 42, 0.5);color: white;"> Co-founder at seefund </p>
</div></td>
</tr>
</tbody>
</table>
Something like that, but is that really not possible to use the position ? Because you won't be able to move it to the top. You might need to add a z-index property, requied position too.
<table>
<tr>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center; background: #FFFFFF;"><img style=" padding-top:10px; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" >
<p style=" width:100px; text-align:center; font-size:10px;word-break: break-all; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; background: #EE163A; background:rgba(255,200,255,0.5); position:relative; top:-25px;">Mr. Mahesh Murthy</p>
<!-- <p style=" width: 100%; text-align:center; font-size:8px;word-break: break-all; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; background:rgba(150,150,150,0.5); position:relative; top:-10px;"> Co-founder at seefund </p>--></td>
</table>
I was asked to code an html mail (for mailing campaigns).
I've got everything working except the following piece of code.
What I try to do is having an image with other elements on top like titles, a button, a logo, ...
I had all that (not commented lines), but to make it responsive I had to make some changes (commented lines) and then the layout was completely messed up.
To make it even more of a challenge, it's quite horrifying to watch in outlook (even the not commented lines) so a solution for that would be nice to have as well (outlook seems to strip all positioning attributes)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
html {
font-family: 'Open Sans',sans-serif;
font-size: 13px;
line-height: 20px;
/*color: #87888a; */
color: #00000;
letter-spacing: 0,5px;
}
#headertable {
border-bottom: 5px solid #E40520;
position: relative;
max-width: 600px;
}
.absolutepos {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
#invitation {
color: #ffffff;
text-transform: uppercase;
padding:5px 23px 5px 15px;
font-size: 24px;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
background-color: #E40520;
border: solid #E40520;
display: inline-block;
letter-spacing: 2px;
}
h1 {
font-size: 30px;
line-height: 24px;
color: #ffffff;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
h2 {
font-size: 20px;
line-height: 24px;
color: #ffffff;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
margin: 20px 0 0 0;
padding: 0;
}
.submit-button {
padding:7px 12px;
text-decoration: none;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:rgba(255,255,255,0.5);
/*border:solid #87888A;*/
display:inline-block;
font-size: 18px;
line-height: 24px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
transition: background .2s ease-in-out, color .2s ease-in-out;
}
.submit-button:hover {
background: #E40520;
}
</style>
</head>
<body bgcolor="#eeeeee">
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600" height="290" id="headertable">
<!--<table border="0" cellspacing="0" cellpadding="0" align="center" id="headertable" bgcolor="#00000">-->
<tbody>
<tr>
<td>
<img class="absolutepos" width="600" height="290" style="z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >
<!--<img class="absolutepos" style="max-width: 600px; z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >-->
</td>
</tr>
<tr>
<td class="absolutepos" style="top: 15px; padding: 0 0 0 20px;">
<a href="http://google.com" target="_blank" title="google">
<img width="175" height="47" alt="logo" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png">
</a>
</td>
</tr>
<tr>
<td class="absolutepos" style="top: 80px;">
<span id="invitation">type</span>
</td>
</tr>
<tr>
<td align="center" class="absolutepos" style="top: 150px;">
<h1>Big title</h1>
<h2>subtitle</h2>
</td>
</tr>
<tr>
<td align="center" class="absolutepos" style="top: 225px;">
<a href="http://google.com" target="_blank" title="Register" class="submit-button">
Register
</a>
</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" width="600">
<tbody>
<tr>
<td colspan="2" style="padding: 40px 30px 10px 30px;">
...
Thanks in advance
position:absolute won't work in gmail.
Outlook is using HTML renderer, so you might run into some issues in Outlook as well.
Source: Detailed list for CSS support in different email clients
I'm using Zurb Ink to create atemplate for the first time; it's great, but I cannot get my head around a certain problem.
Everything works fine when I view the HTML in my browser, but I'm unfortunately required to send my email through a sending platform which takes the liberty of adjusting the code I've written.
The problem I'm having is with image size. For some reason, an image I'm using, which is 580px wide, sizes itself to 576px when sent through the email platform. I have looked through the code repeatedly and checked around online but I can't find anything, so an help is VERY much appreciated.
<!--header row-->
<table class="row header-bar" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; background: #4480ba; padding: 0px;" bgcolor="#4480ba">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="nine sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 75%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 80%; float: left; clear: both; display: block; padding-left: 10px; padding-right: 10px; margin-left: 5px; margin-right: 5px;" class="text-pad alumni-logo" src="" alt="" width="237" height="80" align="left" />
</td>
<td class="three sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 25%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; margin: 0 auto;" class="center" src="http://www.jampaper.com/userFiles/productImages/tn_02561_Orange_6_1_2_x_6_1_2_Square_Envelopes.jpg" alt="" width="80" height="80" align="none" />
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/header row-->
<!--big image row-->
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last intro-image" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; padding-top: 0 !important; margin: 0 auto;" class="center intro-image" src="http://www.nagelphotography.com/img/s2/v4/p176518365-3.jpg" alt="" width="580" align="none" />
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/big image row-->
I understand this might be a bit of a long shot but I really cannot figure out why this image is not 580px when the screen is wide enough to support it. For reference, at smaller sizes the problem persists, but the difference is a smaller number of pixels.
If anyone comes across this problem in the future - you may be interested to know that the reason the image was out of line was the expander cell below was taking up space, due to the fact that the character had been added by the email platform I was using. Normally in Ink expanders have no size at all.