Hi friends I am getting stuck trying to create an emailer ... I designed an emailer then cut that design into HTML and send that emailer using office 2007 to my gmail... when i checked emailer in my gmail i got this
There are spaces showing after debugging I found there are <p class="MsoNormal"> after every <tr>. To reset this I also applied following style but it doesn't work... please help me guys
CSS
body {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
html {width: 100%;}
body {width:100% !important;}
.ReadMsgBody, .ExternalClass {width:100%; display:block !important;}
table td {border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
#backgroundTable {margin:0; padding:0; width:100% !important;}
p.MsoNormal {margin: 0px}
img{display:block;}
One trick you could try (work in most cases) is adding this style to every td where the image is
<td style="line-height: 25%">
If that doesn't work, try applying it on your <tr> (I honestly don't know how it works, just that it works in some cases)
There is no way to prevent msoNormal tags when sending from Outlook. You can hide the effects in many clients, but as Gmail needs inline CSS (strips the style tag), it is not possible to avoid in Gmail. Here is a related article on the topic
There are ways you can design around it however. You could use one large (uncut) background image and put all of the content in front for example.
How about you put the display: block; per image?
Ex:
<img src="YOUR.IMG.SRC" alt="" style="display: block; margin: 0; padding: 0;" border="0"/>
This worked for me. The hardest part is removing that p.MsoNormal on Outlook, still figuring that out since Outlook's recent versions still has that bug. And also, put ; on every style you type. CSS would be messy if not.
I think i have understand the reason: Its interesting with some Outlook document features interesting with its tags and memory security requirements vault etc..
Simple solution :
p:after {
content: none;
}
Related
I am trying to avoid having page breaks inside of rows for my HTML tables that may go past one page. I am using Internet Explorer Print Preview and also BCL EasyPDFSDK to convert to PDF to test this. I applied the following CSS styling in various combinations to the <td> elements but for each one I was getting an undesired result:
td {
page-break-inside: avoid !important;
white-space: nowrap;
overflow: hidden;
margin: 4px 0 4px 0;
}
I believe the page-break-inside: avoid !important is working, but only on the <td> level. For example, I will see a <tr> that has one <td> on the end of the first page with all of the text intact, but the following <td> tags would be on the next page with all of their text intact.
I didn't think you were supposed to apply formatting to <tr> so I'm unsure how to go about fixing this.
Should I apply the CSS to the <tr> or is there another way to achieve this?
Thanks for the help!
Turns out I needed to collapse borders on the table element and reduce my padding to only 1px using
table { border-collapse: collapse; }
td {
page-break-inside: avoid !important;
white-space: nowrap;
overflow: hidden;
padding: 1px;
font-size: xx-small;
}
I also set the font-size to xx-small just in case that was causing an issue. The issue seemed to primarily be resolved when I collapsed borders, so it makes me wonder if the table was having issues splitting the rows because of that.
Cheers!
EDIT:
Since dealing with this issue, I have found out that the row splitting is handled much better in newer web browsers. I highly recommend updating IE to at least 11 if you are experiencing this issue.
I just added the below css to my #media print and it worked!!!
None of the solutions applied to td, th, tr worked
table {
page-break-inside: avoid !important;
}
In trying to give my emails a more 'professional' look, I want to create a neat looking signature. Now for a test, I first want to create a simple signature. And if I get the hang of it, expand it to a better one.
It seems that I can't seem to 'reset' or clear the table. But I can't figure out what the problem is... Any help would be appreciated!
For starters I want to create a signature like this:
I created a single html file (including css) with simple code in it. See below. The problem I keep experiencing is that for some reason, the tables height seems to be larger (only on the bottom) when I insert an image in one of the cells. See problem.
As you can clearly see, the table height exceeds that of the picture. I can't figure out how to remedy this...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
<style>
table, td, tr {
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}
table {
width: 400px;
}
img {
padding: 0;
margin: 0;
}
#Avatar {
width: 80px;
height: 80px;
}
#Whitespace {
width: 2px;
}
#BlueBar {
width: 6px;
background-color: #0CF;
margin: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
<td rowspan="3" id="Whitespace"> </td>
<td rowspan="3" id="BlueBar"> </td>
<td rowspan="3" id="Whitespace"> </td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>
in terms of solving your problem you may want to re-look at the structure of your table. The development of HTML emails and signatures can be pretty hard to do as many email clients respond different and have different support levels.
A guide to writing HTML, CSS and JS for email client usage has been created by Campaign Monitor and can be found here: https://goo.gl/oo1tcU
Support is so varied and there are very few 'safe' elements and attributes also campaign monitor's guide sadly doesn't include a list of the buggy HTML attributes. For example personally I have experienced rowspan and colspan not working correctly in a lot of email clients therefore I wouldn't suggest using them at all. Instead draw up a grid which has equal structure and use empty tags with defined HTML width and height attributes to make the table work for you.
Unfortunately to make an signature look exactly the same in all clients steps like using empty but defined tags are necessary or some clients will simply ADD the 's the colspans are running over.
In HTML emails/signatures you must define EVERYTHING to make sure nothing changes, a table tag I use at the start of all my projects looks something like this:
<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >
Also for all images use a tag like below and define the width and height in HTML NOT CSS.
<img src="" alt="" width="" height="" style="display: block; border: none;"/>
Email clients cause you to write HTML like its the 1990s, it's very frustrating but without considerations like these you may get the result you want in one client but if you send to another your signature will look different to a recipient. As you are trying to increase your professionalism I assume this wouldn't be desired!
Another tip I would suggest is using as much imagery as possible (and remember to define the width and height in HTML) because if defined correctly a structure built with every td and img tag width and height defined will almost never change. This is beneficial because text fonts also have low support unless they are standard fonts e.g. Arial!
Finally use ONLY Inline styles, many clients strip anything in a head tag out!
As part of redesigning a site, I am trying to style a table with css.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
I ended up with this:
<table class="table1">
.table1 {
width: 100%;
border: none;
border-spacing: 0;
border-collapse: colapse;
padding : 0;
}
The weird problem: when applying the css style to the table, the result is slightly different. The space between cells is slightly larger.
Please see the jsfiddles:
Table not style with css: http://jsfiddle.net/32534/1/
Table styled with css: http://jsfiddle.net/47AUR/1/
Why the extra space between the text inputs? What am I doing wrong?! Thank you!
Edit: Using Google Chrome.
cellpadding affects td padding too, so simply add:
.table1 td{
padding: 0;
}
By default chrome adds it's default styling:
`border-spacing: 2px;` on the table.
In http://jsfiddle.net/32534/1/ you haven't mentioned any styling for table. Hence it's picking up default style of chrome.
But in next fiddle link: http://jsfiddle.net/47AUR/1/ you have specifically mentioned the style for the table, which overwrites the default style of chrome.
It's a good idea to use reset.css to be consistent across all browser's and ignore the default styling of all browser's
Simply add
td {
padding: 0px;
}
it will work with a padding:0 on the td (as that is what the cellpadding affects) elements and a second l to colapse
demo at http://jsfiddle.net/at4yL/
Ok, I have this html template. It was created in photoshop and then I use slice tool to export pictures.
Now, when i send the mail, gmail and yahoo render ok but outlook... create white spaces between images (tables)
http://img545.imageshack.us/img545/4240/j98x.jpg
Can you please tell me how to fix this? Only in Outlook I have this problem (big)
I use this CSS
<style type="text/css">
#outlook a{padding:0;}
body{width:100% !important;}
body{-webkit-text-size-adjust:none;}
body{margin:0; padding:0;}
img{border:none; font-size:14px; font-weight:bold; height:auto; line-height:100%; outline:none; text-decoration:none; text-transform:capitalize;}
</style>
and of corse style="display:block" at every image
Hi to Avoid white spaces in between images in newsletters,
We have to give display:block; for each image and give border:0px; for table and td,tr .
Hope it will help for you a bit.
Thanks
Try adding this to your CSS:
table td {border-collapse: collapse;}
and make sure your images all have this:
style="margin: 0; border: 0; padding: 0; display: block;"
I agree with Suman.
Make sure that if you are using images in your email newsletter - you accompany inline style as well with it.
Example: <img src="image path/image.ext" style="display: block;" />
You might want to go through this tutorial creating html email newsletter - It can help you!
Can someone please help me, this is driving me crazy. I have seen answers to other questions on this site, but I just cant seem to apply them.
Basically I am trying to fix the widths of my tables in html dreamweaver. However it just doesnt seem to work.
My current code looks like this:
table align="center" style='table-layout:fixed' width="910" height="627" border="0"
but it still expands above the specified width.
I have tried also to do this this:
.fixed { table-layout: fixed; }
<td width="18" class="fixed"></td>
but that doesnt work either!
You could try putting all the styles you need in a class,
.fixed { table-layout: fixed; width: 910px; height: 627px; border: none; text-align: center;}
then just apply the class to the table:
<table class="fixed">
Also, could you clarify what you mean by "trying to fix the widths" in your table? Could you post some more of the code around the table, or the entire table itself?
May be you can try something like this.
<div style="overflow:hidden;width:910px">
<table>
<tr>
<td>...</td>
</tr>
</table>
</div>
Or you can give overflow:scroll if you need a scrollbar.
First thing to do: get rid of the HTML4-attributes like align, width or border and do this with CSS alone. It should be no problem to set an absolute width to a table.
Second, you don't need a table-layout: fixed; to set a fixed width for a table. <table style="width: 910px;"> should be enough.
Thanks for your responses.....I am quite new to this, but I will try to expand
Basically, below is my style sheet and start of code. I want, the body, and the top to tables to be a maximum width of 910. I am creating other tables inside of these, and when information is entered into the cells, it doesn’t wrap around, it just makes the page a bigger width…..I don’t want this to be possible
<style type="text/css">
body { background-color: #000;font-family: Comic Sans MS, cursive;font-size: 12px;color: #000;text-align:left
width="910" height="627" border="0" }
.mainbody {background-color: #fff;width="844px" table-layout: fixed;}
.background {background-color: #000;}
.banner_f { color: #FFFFFF;font-weight: bold;font-size: 36px;font-family: Verdana, Arial, Helvetica, sans-serif;
width="910" height="203" table-layout: fixed;}
</style>
'/Images/Buttons/Fixtures_Top.jpg','/Images/Buttons/Scorers_Top.jpg','/Images/Buttons/Reports_Top.jpg','/Images/Buttons/Contact_Top.jpg')">
width="844" height="68">
`