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.
Related
I have an intractable, at least for me, HTML/CSS problem. Here is a bit of a web page I'm currently developing:
(The whole page is here: http://www.professorbrown.net/ but has now been changed as suggested in the accepted answer.)
Note that the "fine print" at the bottom has the same line spacing as the body copy, and I can't fix it. It looks the same in Chrome, Firefox, and Edge, so it has to be an error in my work.
The CSS is: .fine {font-size: 1rem; line-height: 1.1;} The markup is <span class="fine">.
Using the inspector function of both Chrome and Firefox shows the computed CSS for font-size as 10px, which is correct, and the line-height as 11px, which is what I intended, but clearly not what's displayed. Measurement says the displayed line height is about 32px, which is the same as the body copy above the fine print. Margin, border, and padding for the fine print are all zero. HTML and CSS validate using validator.nu and Jigsaw. There are style sheets from Skeleton, Superfish, and Slick linked in. I've commented them out one by one with no change in the error.
Please tell me what I've done wrong or give me some help with further debugging.
(Note: This is still a development project, so TLS is not enabled and the images have watermarks because I haven't licensed them yet. I know both things must be done before "production.")
A span won't take on line-height correctly due to how its display property works if it is inside a div with defined font-size or line-height css. You can either change your span to a div or, you can add display:block to your .line's css class to change the display behavior.
e.g.
.fine {font-size: 1rem; line-height: 1.1; display:block;}
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
There's about 3 or 4px white space under all images when viewing a page in wordpress. When viewing the same page without wordpress there's no white space under the same images, despite the same code.
Have tried display block, margin and padding set to 0, and removing empty spaces in the html file, but still for some reason there's this image space. Is this something known with wordpress, such as php code messing something up? I'm using <?php bloginfo('template_url');?> + image path for all the images, whereas the original file uses no php and has no image gaps.
Edit: Here are two snapshots from original file and wordpress showing wp's gap.
Using developer tools I could see that it's the div that holds the images and list items that's responsible for the gap. Yet the other divs holding images and lists in the same way don't have gaps, hm..
A quick checklist.. (apologies for it ignoring some of which you stated you've already tried)
Does the problem appear in both firefox and chrome? If only chrome it's probably a display: block; missing somewhere.
Inspect the element with firefox or chrome to see if wordpress or your theme is inserting any html/css. It may be inserting pre-styled ul li or p tags which you will need to style.
Make use of !important to override any css that may be set by wordpress core styles. Gallery styling, for example, is still set in core.
!important example usage (with some ideas as to how your theme or wordpress styling could be affecting it from somewhere)
display: block !important;
margin: 0px !important;
padding: 0px !important;
height: 100% !important;
max-height: 100% !important;
vertical-align: top !important;
font-size: 0 !important;
You can also try adding this filter to your functions.php file and then play with the gallery css.
add_filter( 'use_default_gallery_style', '__return_false' );
Here's a tutorial on styling galleries - http://theme.fm/2011/06/how-to-style-your-wordpress-gallery-43/
There are other filters to remove the auto style inserts by wordpress if you find those are the problem (as it sounds to be)
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.
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;
}