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!
Related
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;
}
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/
I have searched and searched on this site for a solution to this and tried to apply all results too my simple HTML but none have appeared to work.
I'm sure there is a really easy way to do this because at the moment there isn't really any code as will explain.
I want a simple layout, 3 divs. One Main Page div containing two horizontal divs, I want the two inside divs to contain a picture that will be used as the div backgrounds enclosed in the Main Page div, I can get the backgrounds on but cannot rid the page of the white line, that I'm sure you guys are sick of reading about.
I get the line appearing between "header" and "site" divs. I'm sure this is an easy solution.
I have want to keep the HTML as simple as possible and only plan to have 3 three links that I will put in once the space has gone, as I'm sure I can apply the solution to further divs.
I'm also struggling to upload code, please advise
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="mainwrap">
<div id="header">
</div>
<div id="site">
</div>
</div>
</body>
</html>
CSS:
#header{
width:1080px;
margin:0;
height:285;
background: url(header.jpg);
float:left;
}
#site{
width:1080px;
margin:0;
height:480;
float:left;
background: url(main.jpg);
}
#mainwrap{
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;
}
Many Thanks if someone can post a solution.
You're having this problem because of the font size of the container. Set the line-height and font-size of the container to 0 and the space will disappear.
If it still doesn't fix it, remove any whitespace (including tabs or line breaks) from your HTML so the code blocks are touching each other like so:
</div><div>
// ^^ no space here
However, remember that font style declarations will cascade down into the container's children, so be sure to set the font-sizeand line-height back to normal inside them.
I tried entering your code in to jsFiddle, but I wasn't able to reproduce the same results you were seeing (with the white lines). May just be my browser...
However, I think this will help solve your issue. I've found it's always a good idea to include a CSS Reset in your CSS file. This gets rid of all those unwanted spaces, margins, and other things that are a pain to work with later.
Try adding the CSS from this site:
http://meyerweb.com/eric/tools/css/reset/
Or just Google "CSS Reset" and use any of the CSS samples. You would add the CSS to your existing CSS... the reset just makes sure all the margins, padding, etc are set to zero.
Adding to each element in css file
{overflow: hidden;}
works for me.
Like Mr. Brice Said you need to set the smaller line-height as possible to fix the small size to your div of the source code of your page but take care if in the CSS of your general Body the line-height are diferent, like the example:
body{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#545454;
line-height:18px;
}
If your div needs a diferent line-height, and font-size to some speciffic section of website you need to set a class to then, link this:
#mainwrap{
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;
line-height:18px;
}
If you want your line between divs disappear you simply add one line of code in your CSS. This line of code is BORDER I believe that 1 to 3 pixel border would be ok.
#header{border:1px;}
You can change the colour of your border the same way as well:
#header{border-color:#ffffff;}
For example:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="mainwrap">
<div id="header">
</div>
<div id="site">
</div>
</div>
</body>
CSS
#header{
border:1px;
width:1080px;
margin:0;
height:285;`enter code here`
background: url(header.jpg);
float:left;}
#site{
border:1px;
width:1080px;
margin:0;
height:480;
float:left;
background: url(main.jpg); }
#mainwrap{
border:1px;
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;}
I'm building an email that has to have images hidden on the desktop and shown on the mobile. Only way you can do this is using display none which isn't supported by gmail.
I was wondering if there is any other ways of hiding images on the desktop version so that i can use media queries to style the email in the mobile version.
The problem is only in gmail
Much thanks
On your inline styles for desktop, make the width and height of the image 0. Then use your responsive media-query CSS to restore the image to its proper size.
Edit: Try adding mso-hide:all; to your inline css as well to fix issues with Outlook.
Inline style for desktop:
style="max-height:0;width:0;"
Responsive css #media query:
max-height: none !important;
width: auto !important;
Works like charm :)
In order to hide an element in an HTML email and have it work in Gmail you need to zero it out and adjust the sizing in your CSS (which Gmail will ignore).
Like so:
<style>
#media only screen and (max-width: 480px) {
*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--[if !mso]><!-->
<td style="width: 0; max-height: 0; overflow: hidden; float: left;">
</td>
</tr>
<!--<![endif]-->
</table>
Additionally, the added conditional comment covers you for Outlook 07.
hidden isn't a valid value for display.
Try:
{
display:none;
}
Or, if that still doesn't work, try:
{
visibility:hidden;
width:0;
height:0;
padding:0;
margin:0;
}
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.