I have a minor question:
Im doing a email that is being sent out and wish to have no margin at the top of the email - so that a image or table is flush with the top of the viewport.
I have tried sticking body tags in the html email with margin-top: 0px and it works fine in Thunderbird. However when testing in Microsoft Outlook there is a margin top applied to the content. Is there any way to get rid of this margin or is it not possible in Outlook.
You need to add the following to the <body> tag.
<body topmargin="0">
Ultimately though Outlook is poor at rendering CSS and it's going to get worse with 2010 unfortunately. In the mean time, in-line styles are really the only styles that will work in the majority of cases.
Outlook is the bane of HTML emails everywhere.
Check out this discussion for some answers and tips.
Bottom line: code like it's 1998. Tables all over the place. Don't nest tables either, as that often causes problems. No external styles, so learn to love your inline style attributes.
Ugh, just thinking about it gives me a tummyache.
Maybe you could try to insert some css that overrules the body?
Something like this:
*{
margin: 0px;
padding: 0px;
}
Related
Well I am creating a HTML signature for the company I am working for so I investiagted a little bit and started coding it using inline styles and native html properties. I have not tested it using testing services like Litmus and is not probably an option because of budget limitations.
Here is what I've done:
- Used MS Outlook 2007 to create an empty signature
- Used Notepad ++ for editing
- All my code have inline styles and native html properties so there are no css classes
Long story short, everythig is fine, but when i send a email to outlook.com(hotmail) I have this wierd spacing issue. It appears as almost everything inside my table (used for layout) is wraped in p tags with this peculiar styling. eg.
//These values are just for reference
line-height:143%;
margin:0 0 1.3pt 0;
To get rid of all the bugs I encountered while testing, I have done these steps:
I have set width and height in native html properties AND with inline css
Used
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
to force maximum HTML/CSS support
Used a known fix for spacing issue that didnt work
<style>
.ExternalClass p.ecxMsoNormal {
line-height: 100% !important;
margin: 0 0 0 0 !important;
}
</style>
Tried to have a background in td, but didn't succeed in fixing this so I just made a pic 1px wide and streched it to needed width but the height stayed as it is to rech a stripe like effect.
I Wanted to stretch an image across the page with width set as 100% and its container td (and table) also set to 100% but it didnt work. Table and td streches acordingly but the image receives a fixed value of 32px out of thin air so I couldnt figure that out too.
So thats it, I hope some of you can point me in the right direction.
The main culprit here was MS Outlook (desktop application). It edits my html email before sending it to the destination and removes everything from head section it also adds its own styles and bunch of other rules.
Wraps almost everything in < p > and < span > tags and then sends the email. All email clients that have "noraml" rules for < p > tags look more or less OK but outlook.com that has that stupid formating for < p > tag (mentioned above) renders the mail disassembled and ugly.
So I used Mozilla Thunderbird for sending HTML email and got rid of all the problems I encountered.
Using Litmus for responsive emails is showing great results for the majority of browsers, however some objects in the email are using Display:none !important; and are still showing up completely in Yahoo / Gmail, and partially in outlook 2013.
Update : Providing example -
Using the styling code as following
Basic Styling
.mobile {display: none; font-size:0; max-height: 0; line-height: 0; mso-hide:all;}
# Media
table[class=mobile] {display:block !important;line-height:1.5% !important; max-height: none !important; font-size: 12px !important;}
`<table class="mobile">
<tr>
<td>This should show up on mobile
</td>
</tr>
</table>
`
On most browser via litmus only one or the other will show, but on Gmail it is showing both the mobile an the browser text
display isn't supported in Outlook 2013 or googlemail - http://www.campaignmonitor.com/css
However z-index is. So you could try setting a negative z-index. I've not tested this, but worth a try.
Seeing as your question is lacking in any relevant information i can only advise you.
Read and follow the information here
http://kb.mailchimp.com/article/how-to-code-html-emails/
Especially note the point
99% of your CSS won't work (especially not in the browser-based email services like Gmail, Yahoo!Mail, etc.).
Avoid as much css as possible, code like its 1999 - yes use tables
IF you must use css, use inline, and what you cannot use inline put in the body and not the head.
So if you are trying to hide something ?? what we dont know - you need more to start thinking about things like white text on a white background.
Try wrapping your mobile tables in this:
<!--[if !mso]><!-->
<div class="mobileonly" style="display:none; width:0px; max-height:0px; overflow:hidden;">
<!-- tables! -->
</div>
<!--<![endif]-->
then in your media query
div[class="mobileonly"] {
display:block !important;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
I know its an old post.
Solution is to use html tables to layout email content that will look and work well on outlook. Then wrapp the columns in </td> </td> so that the td columns will be killed on other email client's like gmail, mobile emails etc.
This way you can create emails with two columns on outlook but wrap the columns on non outlook.
We've got a really annoying layout problem on our site only in IE (7 & 8 tested), Firefox and Chrome works fine. The problem is on this page:
http://www.foe.co.uk/community/campaigns/climate/rio_resources_33589.html
The problem code is that the report images should appear to the left of the text to the right. We have a simple that contains the item and the a inner floated to the left and another floated to the left too. Both have widths that are less than add up to less than the outer DIV. Here's an example bit of code that isn't working:
<div class="resourceitem">
<div class="resourceleft">
Test LEFT
</div>
<div class="resourceright">
Test RIGHT
</div>
</div>
The relevant CSS is simply:
.resourceitem {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
div.resourceleft {
float: left;
margin-left: 20px;
width: 156px;
}
div.resourceright {
float: left;
padding: 0;
width: 268px;
}
Any help is much appreciated, it's driving me bonkers!
Cheers,
Chris.
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
Remove </a> from the following code It is an extra code (might be a typo) and causing trouble in IE:
<div class="resourceleft">
<img border="0" alt="Rio+20: Is this it?" src="http://www.foe.co.uk/imgs/Rio_-_is_this_it.png" />
</a>
</div>
Note: every <div class="resourceleft"> has an extra </a>
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
Lately, I've been running into more and more poorly designed websites that do things like this Hudson Website The page is some 1600 pixels wide on my 90 degree rotated monitor, it means you have to scroll left<->right a LOT. Having firebug installed, I figured I'd just go fix it on the fly for reading, but that is proving harder than imagined.
I can't seem to locate what is causing it to be so wide. There is a <table width='100%'>, but that should be 100% of the container, and I can't find a container that says "BE UNREASONABLY WIDE". So, I'm asking what tricks you use in firebug to figure out what is causing an element to have the size it has, specifically the width.
Edit:
Well, I'm still picking at it, and it turns out that
.wiki-content p {
margin: 10px 0;
padding: 0;
width: 850px; // I had to add this to make it readable, width was NOT defined
}
will make it readable, so something about the <p> tag is causing it, but I don't see anything in the css that should make it this wide. What am I missing?
The page is wide because of the <pre> elements.
At least on Firefox, you can fix it by adding the CSS rule:
pre {white-space:normal;}
You could run the page through a validator as a first step. E.g. http://validator.w3.org/
As an aside, I ran the master CSS of the linked site through the Flumpcakes optimizer, and got this result:
Before 64064
After 53832
Saving 10232
Percentage: 16%
My boss's clients are complaining that when some HTML newsletters are forwarded, their table-based layout breaks. I have determined that this is most likely caused by using the following option in Outlook:
Tools > Options > Mail Format > Use Microsoft Office Word 2003 to edit e-mail messages
My boss refuses to change this option and is demanding that I figure out a work-around. But I'm plain stumped. The e-mail that is breaking when forwarded with this option on is at http://www.egusts.com/stratham/stanford-square/10-0826/new/
Here's what happens when the Word 2003 HTML editor is done with it. No edits, just hit "forward" with that option selected - http://www.egusts.com/stratham/stanford-square/10-0826/new/alt/
Here's an example that my boss forwarded me that makes it through just fine - http://www.egusts.com/stratham/stanford-square/10-0826/new/example.html
But I'm still really stumped. I have no clue what to do. I had thought my original template's table-html was really simple and straight-forward. What's breaking in the Word 2003 Editor? Why? Is it stripping some tags? Adding some tags that screws it up? Is there anything I can do?
I'm at my wits end! Thanks for the help
Unfortunately, forwarding an email causes one client to re-render HTML that has already been rendered, and this will almost always screw something up. However, using better practices when coding your emails will help cut down on these problems. I've done a lot of emails and here are some things I've learned:
Never use rowspans or colspans. These tend to break down quickly across email clients and when forwarded. Instead use nested tables.
If you have a bulleted list, use either an unordered list (ul), or if you must use a 2 column table with a row for each list item and put the • in the first column for each item.
Stay away from p tags, they have inconsistent spacing across email clients. Using 2 br tags can give you roughly the same amount of space.
Use padding to control the spacing of elements instead of margin. Again, not very consistent, in fact, I'm not sure it works at all.
Super scripted elements will usually push the line they are on down (or the lines above up). Use an inline-style of line-height:0; to fix that. Note, however, this will still happen when forwarded. If you're using footnotes and need to superscript just a few numbers, use the HTML entities ¹ , ² , and ³.
Background images are not supported in Outlook 2007-2013 for Windows. They seem to work for Outlook Mac, and a lot of other clients, but don't bother with them if you need to support Outlook for Windows.
Find a reliable template to use and always start with that. This should include styles in the head aimed at fixing problems with web, desktop, and email clients. Here are some I usually use:
body {
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}
a:link {
color : #1d3666;
text-decoration : underline;
}
a:visited {
color : #1d3666;
text-decoration : underline;
}
a:hover {
color : #a43232;
text-decoration : none;
}
table {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table td {
border-collapse: collapse;
}
img {
outline:none;
text-decoration:none;
-ms-interpolation-mode: bicubic;
}
a img {
border:none;
display:block;
}
While web clients like Gmail, Yahoo, Outlook.com, and AOL will probably strip the head and any internal styles out of your email, these will come through for most mobile mail client users and for desktop email clients like Outlook and Thunderbird, which are what these styles aim to fix for. For everything else, use inline styles.
Also, it looks like you created this using Fireworks. That might work for a web page, but email has a lot of pitfalls and limitations that FW probably does not account for. I'd recommend either using Dreamweaver or some other helpful text editor and do it using HTML with inline styles.
I figured out that, in addition to using transparent spacer GIFs, I needed to specify a "width" for each of the s that housed the spacer GIFs.
That solved most of the layout problems, although forwarding an e-mail in outlook with that option set injects a lot of other ugly code that can screw things up.