I have to design a template for microsoft outlook email which requires me to place a dynamic image and text from server on an existing static background image. I tried designing it using div's as well as table and also gave inline css and (!important) for the html. I could not find support for tags such as margins, float,positions and my layout always breaks. I found that outlook email does not support those css attributes. Please suggest me a way to design the template without layout breaks.
this is how my template should look.
http://templates.mailchimp.com/resources/email-client-css-support/
Above link
I tried it in two different ways for aligning them:
using div:
<div align="left"><img style="padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="staticimage.png " alt=" ">
<h4 style=" font-family: serif; color: rgb(255, 252, 252);">#Some Text#</h4></div>
<h3 style="font-family: -webkit-body !important;font-style: italic;color: #147C6C; margin-top:-55px">Text</h3>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;
width: 731px;height: 500px; margin-top:-150px;margin-left:25px" src="dynamicimage.png">
using table:
<tr>
<td>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;width: 731px;height: 500px;" src="staticimage.jpg">
</td>
<td align="center">
<span style="margin-left: -1458px;">
<img style=" padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="dynamicimage.png " alt=" ">
<span><h4 style=" font-family: serif; color: rgb(255, 252, 252);margin:0px 0px 0px 0px; ">#some text#</h4></span>
</span>
</td>
<td align="center">
<span style="margin-left: -1253px;">
<img style="width: 350px;height: 225px;margin-top: 44px; " src="dynamictext.png " alt=" ">
</span>
</td>
<td>
<h2 style="margin: -5px 0px -55px -877px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">
<strong>Some text</strong>
</h2>
<h3 style="margin:54px 0px -5px -864px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">Employee name</h3>
</td>
</tr>
Tables usually work with outlook emails but if they are not, if you're trying to get 40px margin, for instance, add a 40px transparent image on the location.
Related
I have a footer at the bottom of the page but when zooming in, the table in the middle of the screen grows but the footer doesn't. Is there any way, using basic HTML/CSS or any JS/CSS Framework that will allow me to continue it to grow.
.footer-center-vers2 {
position: relative;
background: #292929;
margin-left: 670px;
font-family: arial, Helvetica, sans-serif,verdana;
font-size: 9px;
color: #bfbfbf;
padding: 10px 0px 10px;
}
.Regulations {
padding: 0px 0px 0px 0px;
border-spacing: 0px;
margin: 0 auto;
width:1000px;
}
<table width="100%" class="Regulations">
<tr>
<td class="footer-center-vers2" style="text-align: center; vertical-align: middle;">
<span style="vertical-align: middle">
<img src="small.png" border="0" alt="My Company Ltd." /><br />
© My Insurance Company Text<br />
<br />
</span>
</td>
</tr>
</table>
At 0% Zoom, the table looks great but when you zoom in >125%, the table is no longer 100%. Any ideas, please?
Your table has the class .Regulations, for which you set a fixed width width:1000px;, which interferes with the width="100%" you set in the table tag in the HTML code. Remove one of the two.
I'm kinda new to coding html so I copied a mobile-friendly template from cerberus for my job. My current problem is that I have added a border to the header image, however when the window is resized to anything less than 100%, the right border does not show. I have tried removing width:100%, that actually makes it worse. I have also tried to add padding, but that doesn't seem to work either. Below is the code please any assistance would be appreciated.
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="max-width: 680px;" width="100%"><!-- Hero Image, Flush : BEGIN -->
<tbody>
<tr>
<td bgcolor="#ffffff"><img align="middle" alt="alt_text" aria-hidden="true" border="0" class="fluid" src="https://......" style="width: 100%; max-width: 660px; border: 10px groove goldenrod; height: auto; background: rgb(221, 221, 221) none repeat scroll 0% 0%; font-family: sans-serif; font-size: 15px; line-height: 20px; color: rgb(85, 85, 85);" width="680" /></td>
</tr>
Solution 1: use box-sizing: border-box; so your width include border as a box:
CSS3 box-sizing Property Definition and Usage
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box? Or just the content-box (which is the default value of the width and height properties)?
content-box:
Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included
border-box:
The width and height properties (and min/max properties) includes content, padding and border, but not the margin
initial:
Sets this property to its default value. Read about initial
inherit:
Inherits this property from its parent element. Read about inherit
ref: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
.fluid {
width: 100%;
max-width: 680px;
border: 10px groove goldenrod;
height: auto;
background: rgb(221, 221, 221) none repeat scroll 0% 0%;
font-family: sans-serif;
font-size: 15px;
line-height: 20px;
color: rgb(85, 85, 85);
box-sizing: border-box;
}
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="max-width: 680px;" width="100%">
<!-- Hero Image, Flush : BEGIN -->
<tbody>
<tr>
<td bgcolor="#ffffff"><img align="middle" alt="alt_text" aria-hidden="true" border="0" class="fluid" src="http://placehold.it/350x150" width="680" /></td>
</tr>
</tbody>
</table>
Solution 2: use the following in your .fluid because width does not include border width:
width: calc(100% - 20px);
.fluid {
width: calc(100% - 20px);
border: 10px groove goldenrod;
height: auto;
background: rgb(221, 221, 221) none repeat scroll 0% 0%;
font-family: sans-serif;
font-size: 15px;
line-height: 20px;
color: rgb(85, 85, 85);
}
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="max-width: 680px;" width="100%">
<!-- Hero Image, Flush : BEGIN -->
<tbody>
<tr>
<td bgcolor="#ffffff"><img align="middle" alt="alt_text" aria-hidden="true" border="0" class="fluid" src="http://placehold.it/350x150" width="680" /></td>
</tr>
</tbody>
</table>
Ok, so maybe I'm slightly losing my mind but I'm trying to recreate a homepage that incorporates 2 background images into my CSS. I'm attempting to use one as a top image and one as a bottom image, and in the middle is a table that has links and images. However, for some reason, I'm having difficulty with pulling it all together to make it look like one smooth image.
For example, my container class (as shown below) only puts a border around the topBox class and not the entire container div. I want all 3 divs to have one border around it (coming from the container class) so that it looks as if its one image. Here is my HTML and CSS.
What am I doing wrong? Thanks in advance for any assistance!
#Container {
float:left;
width: inherit;
height: 400px;
margin-left: auto;
margin-right: auto;
border:1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg);
background-repeat: no-repeat;
/*place background image css code here and remove line above*/
background-position: left 0px top 0px;
background-size: 300px;
}
.box {
position: relative;
left: 100;
top: 100;
width: 350px;
height: 550px;
border:0px solid #000000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
/*place background image css code here and remove line above*/
background-repeat: no-repeat;
background-position: left 0px bottom 0px;
background-size: 300px;
}
<div id="Container">
<div class="boxTop"></div>
<div class="box"><table width="300px">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="6">
<tbody>
<tr>
<td valign="top"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" /></td>
<td valign="top">
<h3>Become a Member</h3>
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</td>
</tr>
<tr>
<td valign="top"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" /></td>
<td valign="top">
<h3>Classes & Support</h3>
<p>Learn more about the classes, support groups, and health screenings we offer.</p>
</td>
</tr>
<tr>
<td valign="top"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" /></td>
<td valign="top">
<h3>Watch the TV Segment</h3>
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</td>
</tr>
<tr>
<td valign="top"><img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" /></td>
<td valign="top">
<h3>Read the Magazine</h3>
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></div>
<div class="boxBtm"></div>
</div>
Very simple answer, just remove the hight of the id #Container and it'll work. I hope this is what you where looking for ;)
You have set a specific height on your container, so your border is only going to be that height. If you set the height to 750 pixels, it is going to work.
#Container {
float: left;
width: inherit;
height: 750px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg);
background-repeat: no-repeat;
/*place background image css code here and remove line above*/
background-position: left 0px top 0px;
background-size: 300px;
}
.box {
position: relative;
left: 100;
top: 100;
width: 350px;
height: 550px;
border: 0px solid #000000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
/*place background image css code here and remove line above*/
background-repeat: no-repeat;
background-position: left 0px bottom 0px;
background-size: 300px;
}
<div id="Container">
<div class="boxTop"></div>
<div class="box">
<table width="300px">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="6">
<tbody>
<tr>
<td valign="top">
<a href="http://ejgh.org/your-health/healthy-lifestyles/become-a-member-sp-1672965733">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" />
</a>
</td>
<td valign="top">
<h3>Become a Member</h3>
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/component/wrapper/?Itemid=203">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" />
</a>
</td>
<td valign="top">
<h3>Classes & Support</h3>
<p>Learn more about the classes, support groups, and health screenings we offer.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/component/hwdvideoshare/?task=viewcategory&Itemid=166&cat_id=5">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" />
</a>
</td>
<td valign="top">
<h3>Watch the TV Segment</h3>
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine">
<img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" />
</a>
</td>
<td valign="top">
<h3>Read the Magazine</h3>
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="boxBtm"></div>
</div>
This can be a lot simpler - you only need one wrapper div, not three. (You also shouldn't be using a table for layout purposes, but that's a whole other subject. For now, this'll work if you drop your table in where the content p tags are.)
Here's how to get roughly the visuals you want with a lot less code:
.box {
width: 300px;
border: 1px solid;
border-radius: 0 0 9px 9px;
/* You can specify multiple background images like this: */
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
background-size: 100% auto;
background-repeat: no-repeat;
/* first position goes with the first image url and vice versa */
background-position: top, bottom;
/* 130px padding on top to create room for the "lifestyles" logo
20px on the sides for breathing room
50px at the bottom to create room for the green gradient
tweak these values till you like the spacing */
padding: 130px 20px 50px;
}
<div class="box">
<p>content</p>
<p>content</p>
<p>content</p>
</div>
I'm making this site for my friends mom and for some reason my links aren't working in my table, I have reason to believe that it has something to do with the CSS, also I've never had this problem before so I'm not fully sure how to fix it. The code works in Chrome but not Firefox also to clarify, I can't click on the link, it turns it blue and underlines it but I just generally can't click on it at all.
HTML
<nav>
<table id="nav_table">
<tr>
<td class="nav_border">
<p class="nav_options">Home</p>
</td>
<td class="nav_border">
<p class="nav_options">Restaurants</p>
</td>
<td class="nav_border">
<p class="nav_options">Near you</p>
</td>
<td class="nav_border">
<p class="nav_options">Order Here!</p>
</td>
</tr>
</table>
</nav>
CSS
nav{
position: relative;
top: 50px;
}
#nav_table{
position: relative;
top: 60px;
margin-left:auto;
margin-right:auto;
border-spacing: 5px 0px;
border-collapse: ;
height: 0px;
}
.nav_border{
text-align: center;
border: 2px solid black;
padding: 10px;
width: 120px;
height: 0px;
-webkit-box-shadow: rgb(,,) 0px 0px 0px ;
-moz-box-shadow: rgb(,,) 0px 0px 0px ;
box-shadow: rgb(,,) 0px 0px 0px ;
background:-webkit-radial-gradient(center,circle,red 0%, orange 50%);
background:-moz-radial-gradient(center,circle,red 0%, orange 50%);
background:radial-gradient(center,circle,red 0%, orange 50%);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.nav_options{
font-size: 20px;
text-decoration:none;
}
Now as I said before I've never had this problem, I've tried googling it and it said it had to do with changing the parent element width and height to percentage instead of pixels but I don't think it applied to what I'm trying to get done.
You need to put 'http://' in front of your urls, so the browser knows it is an absolute URL.
e.g. href="http://www.google.com"
Without, the browser thinks the URL is relative so it's taking you to the wrong page.
It's also better backwards compatibility to put your anchor tags inside your paragraph tags.
<p class="nav_options">Home</p>
Your syntax is not correct. If you want link with text you should first try this
link text
<nav>
<table id="nav_table">
<tr>
<td class="nav_border">
Home</p>
</td>
<td class="nav_border">
<p class="nav_options">Restaurants</p>
</td>
<td class="nav_border">
<p class="nav_options">Near you</p>
</td>
<td class="nav_border">
<p class="nav_options">Order Here!</p>
</td>
</tr>
</table>
</nav>
Your cod isn`t correct , you must add < a > < / a > tag in to < p > < / p >
if you want clickable cell use it CSS for a tag :
a.Click {
width:100%;
height:100%;
display:block;
text-align:center
}
I am trying to get the following HTML to fully render in Outlook 2010 fake a button (since outlook doesn't render many css selectors). :
<table style="border: solid; background-color: red;">
<tbody >
<tr>
<td><a style = "text-decoration:none"href="www.google.com" ><span style="color: black;">here</span></a></td>
</tr>
</tbody>
</table>
Everything seems to work except the border lining does not render at all. From what I understand, outlook should render this (http://www.campaignmonitor.com/css/), but does not. Any help anyone can provide would be appreciated.
I usually just use shorthand css properties for borders like so:
<table cellspacing="0" cellpadding="0"> <tr>
<td align="center" width="300" height="40" bgcolor="#fff" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid 1px #e9e9e9; border-radius: 5px; color: #000; display: block;">
<a href="http://www.EXAMPLE.com/" style="color: #000; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Awesome Email Button
</a>
</td>
</tr>
</table>
(Weirdly) for some reason shorthand border css properties render correctly in Outlook 07 and 2010
See http://jsfiddle.net/E6ZYz/
Reference link: http://emailwizardry.nightjar.com.au/2012/08/30/outlook-200710-borders-pain/