I have a cfdocument being created. I have a a footer to it as below
<cfdocumentitem type="footer" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="##FF6F00" >
<td align="right" style="font-size:10px">
<font color="##FFFFFF"> © AT&T Intellectual Property. All rights reserved.<br>AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.</font>
</td>
</table>
</cfdocumentitem>
Im not able to get the orange body stretch out to the whole page, meaning the orange portion is being displayed as above. also the font size is not being rendered which I have specified. here is my style . Any ideas on what is wrong here?
.test{
color:#FFFFFF;
font-family:verdana;
font-size:4px
}
.testone{align-content:stretch}
Try the following changes:
Set the left, right and top margins in your <cfdocument> tag to 0 and the bottom margin to the height of your footer
Make sure the main part of your document has a <body> tag
Add a <style> tag above the <body> tag and specify the main body margins, e.g. 2cm
Now wrap your footer table in a <body> tag
Add a <style> tag above this body tag within the footer
Set the body margin and padding to 0
Set the table height to your cfdocument marginBottom value
Here's what your code should now look like (Note, I've specified cm as my unit):
<cfdocument format="pdf" marginBottom="1" marginLeft="0" marginRight="0" marginTop="0" unit="cm">
<style type="text/css">
body{ margin:2cm; }
</style>
<body>
<p>Page content</p>
</body>
<cfdocumentitem type="footer">
<style type="text/css">
body{ margin:0; padding:0; }
table{ height:1cm; };
</style>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FF6F00" >
<td align="right" style="font-size:10px">
<font color="#FFFFFF">
© AT&T Intellectual Property. All rights reserved.
<br>AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
</font>
</td>
</table>
</body>
</cfdocumentitem>
</cfdocument>
To style a class you need to put a . before the atribute.
.test{
color:#FFFFFF;
font-family:verdana;
font-size:4px;
}
.testone{align-content:stretch;}
Also make sure cfdocumentitem and body is 100% width.
Related
I've been trying to get a table to span a two-column article container using column-span:all in my CSS-file. The spanning part works, but my problem is that I've got a couple of links inside my table that for some reason don't work in Chrome (v 85) and Ms Edge. By not working, I mean that I cannot click the links and while hovering over them, no change takes effect (a:hover does nothing). The issue doesn't seem to appear using Firefox or IE.
If I remove margin: 2em auto; the links work again, but then my table isn't centered.
So, the question is, how can I make a centered table that spans a two-column article container with still functioning links across Chrome, IE, FF, Safari (not tested) etc?
Is there perhaps an alternative?
MWE:
<html>
<head>
<style>
article{column-count:2;}
a{color:green;}
a:visited{color:red;}
a:hover{color:blue;}
a:active{color:yellow;}
table{column-span:all;margin:2em auto;}
</style>
</head>
<body>
<article>
<table>
<tr>
<td>google</td>
<td>unimportant text</td>
</tr>
<tr>
<td>duckduckgo</td>
<td>another unimportant text</td>
</tr>
</table>
</article>
</body>
</html>
<html>
<head>
<style>
article{column-count:2;}
a{color:green;}
a:visited{color:red;}
a:hover{color:blue;}
a:active{color:yellow;}
.center{
column-span:all;
margin:2em 0;
display:flex;
justify-content:center;
}
</style>
</head>
<body>
<article>
<div class="center">
<table>
<tr>
<td>google</td>
<td>unimportant text</td>
</tr>
<tr>
<td>duckduckgo</td>
<td>another unimportant text</td>
</tr>
</table>
</div>
</article>
</body>
</html>
I am working with some HTML/CSS and VML code to make a button render consistently in most email clients. As outlook doesn't support rounded corners I'm having to add some VML code to achieve this effect. I managed to fix most of the alignment issues but I can't figure out where the spacing at the top/bottom on the button is coming from and how to get rid of it?
I was able to use some VML code from this bulletproof email button generator and Microsoft's reference site
The reason why I'm not using the bulletproof generator is because the people responsible for adding content to emails are not technical and as such I'm trying to minimise issues by exposing them to code as little as possible. Also I understand clicks on VML buttons might not track on some Outlook clients.
Also a similar question can be found here but the solution provided there didn't work in my case or I might have overlooked something?
Below is the code I'm working with. Please note the VML button background colour has been set to green and the table that's meant to be the button is blue. I did this as it was easier for me to troubleshoot.
So far I managed to identify the strange padding around the text itself is coming from the inline css on the a tag but I can't figure our where those random lines of space at the top and bottom of the VML button are coming from.
<!-- button -->
<div align="center" class="float-center" >
<!--[if mso]>
<v:roundrect
xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" arcsize="100%" fillcolor="green" style="width:250px; height:70px;mso-fit-shape-to-text:True;"
<v:stroke color="#1e6db1"/>
<center>
<![endif]-->
<table class="button rounded cta-main float-center" style="Margin:16px 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:16px 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto">
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;border-collapse:collapse!important;color:#1f2935;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="middle">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;width:100%" valign="top">
<tr style="padding:0;text-align:left;vertical-align:top;">
<td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;background:#1e6db1;border:none;border-collapse:collapse!important;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="top">
<a href="https://click.email.ucas.com/?qs=6c9084e0730ba4dc1922768cfa83b05115461a1febe2fb9df4b046be8ebdbf014229f45cf8558f65a28e9fcdb54ced5d6a5fa122aee33ef8" style="Margin:0;border:0 solid #1e6db1;border-radius:50px;color:#fefefe;display:inline-block;padding:24px 32px 24px 32px;font-family:Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;mso-line-height-rule:exactly;line-height:1.5;margin:0;text-align:left;text-decoration:none;">
<span style="color:#fefefe;">
Finance ›
</span>
</a>
</td></tr></table></td></tr></table>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!-- end button -->
VML stuff in general adds a lot to your file size unnecessarily.
I use this for my button code and it works on all the major litmus clients:
<table class="button" border="0" cellpadding="0" cellspacing="0" style="background-color:#212121; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; overflow:hidden; mso-padding-alt:0px 21px 0px 21px;">
<tr>
<td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#FFFFFF;">
<a href="http://buttonLink.com" target="_blank" style="color:#FFFFFF; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:21px; padding-bottom:0px; padding-left:21px; color:#FFFFFF;">
SHOP NOW
</span></a>
</td>
</tr>
</table>
Litmus also has this super helpful article on buttons:
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
can anyone help me with my problem? I try to build newsletter with couple table segments because mailchimp have problem with code and break my mail content if he is not in the table. Main problem for me is image over image. Please, take a look at my code.
Pattern is bottom image and have 100% size (700x50px) and logo is top image (32x32px). Logo must to be on right side and over pattern image with margin-top -20px and margin-right 30px but without using "position" property (mailchimp break all position property).
Right now, my logo is under pattern. I was try to fix this problem with z-index but nothing happens here.
<table class="header_class">
<td>
<img class="pattern_header"src="pattern.jpg" alt="pattern" />
<img class="logo_small"src="logo.jpg" alt="logo" align="right"/>
<h1>July 2017</h1>
</td>
</table>
my css:
pattern_header{
max-width: 700px;
}
logo_small{
margin-right: 30px;
margin-top: -20px;
}
(I am totally beginner and maybe my code isn't ok)
What the header should look like:
For background to work on emails you can use positions (as you have found out). For backgrounds to work in Outlook you need to use VML (vector markup language), this is native to outlook (>2007). All the rest of the email clients should be able to read the background declaration on the td.
Few things to note in the below code:
I have added [HEIGHT OF IMAGE] where you need to add the height for the VML.
You have not provided image dimensions which you will need for logo. Note Outlook doesnt read style attributes on images.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="https://i.stack.imgur.com/UX7Jw.png" style=" background:url(https://i.stack.imgur.com/UX7Jw.png);background-image:url(https://i.stack.imgur.com/UX7Jw.png);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:159;">
<v:fill type="frame" src="https://i.stack.imgur.com/UX7Jw.png" color="#e9e9e9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="top" style="padding:30px 30px 30px 0px;"><img class="logo_small" src="https://i.stack.imgur.com/164VA.png" alt="logo" align="right"/></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Let me know if this works for you.
This is what I need. Logo alignment is not to the top (offset from top 20px and from right 30px). Pattern alignment is top.
Example
I'm trying to get three images on a single line, one left-justified, one centred and the last one right-justified. I've settled on using a single row table to do it, but am having a hard time getting the images to be centred within their respective cells.
Is there a better way of doing it than I've chosen? I'm not going to use the <td align="center"> attribute as it's been deprecated in HTML5, so am looking for a way to do it using CSS. This is what I have at the moment (I've set the table border attribute to '1' so I can see how the image alignment within the cell renders):
<style>
.centre_image
{
float:center;
}
</style>
<body>
<table border="1">
<tr>
<td class="centre_image">
<object type="image/svg+xml" data="images/lawfirms.svg">
<img src="images/lawfirms.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/industry.svg">
<img src="images/industry.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/in-house.svg">
<img src="images/in-house.png" alt=""/>
</object>
</td>
</tr>
</table>
This gives the following result in Firefox 19.0 on Ubuntu:
and the following result in Chrome 25.0:
EDIT - here is the full HTML after making the changes referred to in j08691's answer:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>SVG Included with <object> tag</title>
<style>
.centre_image
{
text-align:center;
}
</style>
</head>
<body>
<table border="1" style="width:100%">
<tr>
<td class="centre_image">
<object type="image/svg+xml" data="images/lawfirms.svg">
<img src="images/lawfirms.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/industry.svg">
<img src="images/industry.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/in-house.svg">
<img src="images/in-house.png" alt=""/>
</object>
</td>
</tr>
</table>
</body>
</html>
Here is the result of Naresh Kumar's answer:
As there is no float:center property, have you tried text-align:center?
.centre_image {
text-align:center;
}
jsFiddle example
try something like :
.centre_image{
text-align:center;
margin-left:auto;
margin-right:auto;
}
i hope that this will help you.
In HTML5 vAlign is deprecated. Here is a tips put all three images in side li tag. And in CSS assign a property display: inline block for the li tag.
There were many ways to not make it right. Especially the 'float:center'.
I fiddled an example here
and another fiddle with basic .css reset here
Since you want to center horizontaly in a TD tag, you can simply align it ..
<td align="center">
But you will be noticed that 'align' property is 'deprecated' and you will be suggested to use CSS instead. For this, others already showed you the answer
.centre_image {
text-align:center;
vertical-align:middle;
}
This CSS will work for as long has your element is not 'floated'
p.s. 'DEPRECATED' is not evil.
p.s. w3school has a not so good reputation on StackOverflow.
I have a link and an iframe side-by-side. I want the link to appear over the iframe. This occurs inside of a td element. this pattern is iterated over a few rows. When I use relative css positioning, I am able to display the link over the iframe, but the space the link would have been in, still appears. and it add unnecessarily to the column height. I want to eliminate this space. How can I do this?
I looked at this but it seems that this solution would still jack up the tr/td height. I also have a sample of my issue
Collapsing the lineheight should do it. Be sure to put a measurement, and not just "0" so it will work in ie6. I added the .collapse class to the divs containing the anchors. http://jsfiddle.net/grs53/20/
HTML
<table>
<tbody>
<tr>
<td class="donotwant">
<div class="collapse">
<a class="top" href="bing.com">link</a>
</div>
<div>
<iframe class="bottom" src="http://www.google.com" ></iframe>
</div>
</td>
</tr>
<tr>
<td class="donotwant">
<div class="collapse">
<a class="top" href="bing.com">link</a>
</div>
<div>
<iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
</div>
</td>
</tr>
</tbody>
</table>
CSS
.donotwant {
border:2px dotted green;
}
.top {
top:80px;
left:120px;
position:relative;
z-index:2;
background:red;
}
.bottom {
position:relative;
z-index:1
}
.collapse {
line-height:0px;
}
Change your HTML to this
<table>
<tbody>
<tr>
<td class="donotwant">
<div class="top">
link
</div>
<iframe src="http://www.google.com" ></iframe>
</td>
</tr>
<tr>
<td class="donotwant">
<div class="top">
link
</div>
<iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
</td>
</tr>
</tbody>
</table>
And you CSS to this:
.donotwant {
border:2px dotted green;
position:relative;
height:180px;
width:300px;
}
.top {
top:80px;
left:120px;
position:absolute;
z-index:2;
}
.bottom {
position:relative;
z-index:1
}
A relative position object keeps it's initial placement but is displayed elsewhere. An absolute positioned element is actually moved to a new position. You can move absolute positioned elements on top of relative positioned.
In the example above I created a div that is relative positioned in which any absolute position element can be moved around from of the top left corner of the relative positioned element. If the relative positioned element is moved anywhere else on the page the absolute one will follow.
That unwanted space is from the DIV element you have wrapped around you link. Remove that.
http://jsfiddle.net/saad/grs53/12/
Just collapse the <div /> that holds the link (e.g. set height to 0). Cross browser might require additional styles but here is an example tested in Chrome