I am coding a simple HTML e-mail and I am experiencing strange behaviour in gmail and Outlook 2003 and 2007. There is a white space below all images. My inline styling for images looks like this:
border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
margin: 0px;
padding: 0px;
All styling is taken from MailChimp HTML code and should avoid inconsistencies. Do you have any experiences with this? Images are inside table td markup. Table cells have cellspacing and cellpadding set to 0 as well. Here is a screenshot of the problem: http://cl.ly/EnFt/o
Images are inline by default. That small gap you're seeing is the space for descenders such as those on 'g' and 'q'. To combat the problem, you need to explicitly set all images to be block elements, like this:
<img src="path/to/img.jpg" style="display:block;" border="0" alt="My Image" />
You can use a service like premailer, which lets you add this style in the head of your HTML file, and will automatically place it inline for you.
It's worth mentioning that display:block; will, obviously, mean that each image should be in a separate td or similar: images that need to display side-by-side will be pushed down below each other.
Just use style="display:block;" to image tag.Its works fine.
write border:0; in your <img> tag. Like this:
<img style="vertical-align:top; border:0;">
Related
I'm webmaster of a directory site with basic CSS skills, using SobiPro on a Joomla base. Directory entries display 2 images at top - an exterior and interior photo. At times, only 1 or the other (sometimes neither) is available; so, I have a line entry that asks anyone who can supply the missing pic(s) to email it/them to me. Until our latest upgrade, this was not a problem, but now it is. Cannot get the two divs aligned. You can see an example here!
This is what the CSS template currently looks like:
div.field_photos
{
border-style: none;
font-weight: bold;
font-size: 12px;
color: #000000;
padding-left: 5px;
margin-top: 360px;
margin-left: 5px;
}
div.field_addy1
{
border-style: none;
font-color: #000000;
font-weight: bold;
font-size: 12px;
margin-top: 0px; /* position it horizontally */
margin-left: 5px;
margin-right: 5px;
}
where field_photos is the intro line (select list choosing either 'interior' or 'exterior' text) and field_addy1 is the bot-protected email addy. I tried floats, but the text tried to wrap on the pics. Tried making it into a single div, using the intro text and 'Directory Webmaster' combo into a single hyperlink, but that didn't fly.
Field widths are 150px and 200px respectively with the Title length and URL length set at 200px max. Any suggestions would be much appreciated.
Your positioning here with margins is a bit crazy. I'm not fully sure what's going on with that. To fix this issue a quick way:
Firstly, remove the margin-top from your .field_photos divider and remove the float:left properties from your main image:
<img class="spFieldsData field_sobi2_icon" src="..." alt="">
.field_sobi2_icon {
float:none;
}
Then change the display of the two fields you want aligned alongside eachother:
<div class="field_photos">...</div>
<div class="spField newClass2">...</div>
.field_photos, newClass2 {
display: inline;
}
I am using a link tag styled to look like a button in my email . The css for the tag is as follows.
Submit
a.submit{
background: none repeat scroll 0 0 #FF9900;
border: 1px solid #FF9900;
color: #FFFFFF;
display: inline-block;
padding: 6px;
text-decoration: none;
}
The link style works everywhere except in outlook . Where only the text gets the background color
I noticed the same issue in the google+ email too. Their buttons show the same css styling problem in outlook
A bit of a work around the padding issue in Outlook, you can use a border with the same color as the background to create the padding for the button. For example:
<a style="border:15px solid #FFAE00;background-color:#FFAE00;color:#FFF;font-size:14px; font-family:Arial;text-decoration:none" href="#">
Click Here
</a>
This would only work for basic button styles.
http://jsbin.com/pohidedayo/edit?html,output
EDITED:
Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
See CSS Support in Mail Clients - The Ultimate Guide
In the above link you can see css background property is not supported in outlook so you should use background-color which is supported in outlook.
As other answers suggest, the support for anything really universal in Outlook 2007, 2010 and 2013 is pretty terrible. The main problem in the case of this button is that the margin property is not supported in these versions of Outlook (they use MS Word as the rendering engine, yuk!) Litmus explains this and the solution really well.
I managed to create an HTML table-based button that will work in almost all major email clients.
Here is the HTML for your reference:
<table cellpadding="0" cellmargin="0" border="0" height="44" width="178" style="border-collapse: collapse; border:5px solid #c62228">
<tr>
<td bgcolor="#c62228" valign="middle" align="center" width="174">
<div style="font-size: 18px; color: #ffffff; line-height: 1; margin: 0; padding: 0; mso-table-lspace:0; mso-table-rspace:0;">
MY BUTTON
</div>
</td>
</tr>
</table>
Hope this helps!
You havent assigned a class to your <a> tag, but if it still doesnt work its because certain email services dont allow certain CSS tags, check here for more info: http://www.campaignmonitor.com/css/
I have an ajax htmlextender on my page. Commenting something with it. When comment text has "enter" htmlextender gives it < p > tag. I use divs while showing comments.
<div style="background-color:#ff0000; width:95%;"><p>note line 1</p><p> note line 2</p></div>
<div style="background-color:#ff0000; width:95%; text-align: right; font-size: 11px;">Name Surname</div>
<div style="background-color:#ff0000; width:95%; text-align: right; font-size: 11px;">02.08.2012 10:04</div>
The output like this:
How can i clear the empty line?
Remove the paragraphs' margin and/or padding:
p {margin: 0; padding: 0}
You can remove the margin from the p element. you might also want to remove the padding is there is any (it's not there by default). It is a good idea to be sure none the less.
A good tool for checking what styles that are applied, are the browsers developer tools. In firebug andothers, you can inspect the element to get a list of applied styles. If you are in Windows you can get this by pressing F12.
Just add this to your CSS file. Or include it in the header.
p { margin: 0; padding: 0; }
You can also apply it to the p element like this, but it is bad practice as you have to separate content and presentation. Do this now, it will make your life easier when you need to change something.
<p style="margin:0; padding: 0;">This is bad</p>
The space will be due to margins and padding applied to the p tag. Add the following to a <style> tag in the header, or an external stylesheet.
p {margin: 0;padding: 0}
If you put p { margin: 0; padding: 0; } in your CSS file it will affect all your paragraphs from all the pages the have that external stylesheet.
And if you use: <p style="margin:0; padding: 0;">, I will have to agree with Allan that is not a got practice to have inline CSS.
Another solution would be to use <span> instead of <p> like this:
<div style="background-color:#ff0000; width:95%;"><span>note line 1</span><br/><span> note line 2</span></div>
Hope this helps! :)
There is supposed to be a way to create rounded corners in a table row or element using just a few lines of code. (This seems preferable to other more complicated ways using images.)
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
However, as a css/js noob, I don't know what to do with this. Can I put it in a style tag within the element to round? Do it put it in .css file? I don't want this to apply to all rows or table cells, just one. Many thanks for the correct syntax/usage.
You can do it in a style attribute on your container :
<div style="-moz-border-radius: 15px; border-radius: 15px;">....</div>
or in your css file:
.class1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
//and add it to your container:
<div class="class1">....</div>
As far as I am aware, this is not IE 8 or bellow friendly, although in Chrome, Safari and Firefox (etc) it works.
If you're only going to be using this once, put it directly in your container.
<div style="-moz-border-radius: 15px; border-radius: 15px;"> Content here </div>
If you are going to be using this more then once on the page, I suggest putting it at the top of your page in the head (or in a stylesheet file):
<style type="text/css">
.roundedcorners {
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>
and in the container putting
<div class="roundedcorners"> Content here </div>
Here's a useful website to help you with using it in tables: http://www.red-team-design.com/practical-css3-tables-with-rounded-corners
My first post here and unfortunately it won't be that exciting and I need an answer that includes IE6.
To get space between paragraphs, I'm styling my <p> tags like this:
div.content_cms p {
margin-top: 0px;
margin-bottom: 15px;
padding: 0px 15px 0px 0px;
}
The margin bottom to space the paragraphs. This of course works fine. But then I also need to style a link with html is this:
<p>Text </p>
When there is a link as in the example above, I don't want the margin-bottom to be applied. I tried to fix it with this:
div.content_cms p a {
margin-bottom: 0px !important;
}
Which of course doesn't work.
I'm adding a class to the <a> tags with jQuery so I can automatically add an icon to links. I tried adding
margin-bottom: 0px !important;
to the class I'm adding with jQuery but that didn't work either.
What's the best way to style spacing between <p>paragraphs</p> with text but not paragraphs with links?
Thank you.
You can easily do this with jQuery:
$('p').has('a').css('margin-bottom', 0);
Live demo: http://jsfiddle.net/NyjvT/
If you need to set multiple styles, then consider this:
$('p').has('a').addClass('whatever');
CSS:
p.whatever { margin-botttom:0; font-size:20px; ... }
I don't think you can.
Your best bet is to add a class to those particular <p> elements, and override the margin on those:
div.content_cms p.nomargin {
margin-bottom: 0px;
}
<p class="nomargin">Text</p>
If this is not possible on the server side, you could do some jQuery hackery to take care of it.
Maybe there's some CSS3 magic that could be used, but I'm not sure of that; and since you want IE6 support, it's out of the question anyway.
This is not possible using only CSS.
CSS (Cascading Style Sheets) works only down the document tree.
The reason for this is performance.
For more info read this:
http://snook.ca/archives/html_and_css/css-parent-selectors
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940
You need to use javascript for that to work.