I am trying to adjust the spacing above and below the image in a Mailchimp rss feed email. Whatever I try I have far too much space between the heading and the image and no spage between the bottom of the image and the excerpt text. Not helped by thefact that the preview doesn't include the image so I am having to send endless tests to myself.
*|RSSITEMS:|*
<h2 class="mc-toc-title" style="font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px;">*|RSSITEM:TITLE|*</h2>
<span style="margin:0px 0px 12px 0px;">*|RSSITEM:IMAGE|*</span>
<br/><br/>
<span style="font-family:Arial, Helvetica, sans-serif; marginn:12px 0 0 0;"><br/>*|RSSITEM:CONTENT|* [Read more . . .]</span><br/>
<br/><hr/>
*|END:RSSITEMS|*
Also is it possible to make the footer come to full width, at the moment it is indented left and right?
Thanks
Related
I have modified an email signature for the company that i'm working with, everything looked great when i tested it.
The things is that i did code on a mac, and when my client send a mail to a windows user, there is a small part of that signature that does not apply my styles options
Here's my code :
<tr>
<td style="width: 167px; padding: 0px 13px 8px 30px; border:none;" class="">
<span style="font-family: Verdana, Arial, sans-serif; padding-top: 5px; font-size: 9pt; margin-right: 10px; color: rgb(119, 119, 119); vertical-align: top;" >partner of</span>
<a href="link" title="brand website link" style="color: rgb(4, 180, 134); text-decoration: none;" class="">
<img moz-do-not-send="false" width="35%" src="http://www.website.com/wp-content/themes/brand/images/logo-inner#2x.png" alt="Logo brand" style="padding: 10px; border-radius: 5px; background-color:#153754; border: 0px;" class="">
</a>
</td>
</tr>
This code already works with another image on the top of the signature so i assume it must come from my styling ?
Which is suppose to do this : right behavior of the style
But this is the behavior i get on Windows :wrong behavior of the style
I can't find anything anywhere, so if you have an explanation, i'd be glad to hear it !
Thank you all !
The background-color isn't working because you're applying it to the image. Outlook 2007-2016 does not support styling ALT. Apply the background color to the actual table cell for the image and it will work.
No image is loading because YOU POSTED A DUMMY LINK TO AN IMAGE. If you're going to come here asking for help, post your actual code. I took the time to test your code to determine the best way to help you. Don't make us work harder just to help you. That's rude.
Outlook has partial buggy support for Padding:
https://www.campaignmonitor.com/css/box-model/padding/
Outlook has partial buggy support for background colors:
https://www.campaignmonitor.com/css/color-background/background-color/
My suggestion is to create a table with two cells. Color the one with the image using bgcolor="#ff0000" or whatever color you wish. That will give you a reliable background color. Apply your font styles to the image style which will change the font for the ALT if an image doesn't load. Use cellpadding to give yourself the padding you want with Outlook.
Good luck.
I'm building Magento website and it's working perfectly fine in Firefox and Chrome, but it's not showing correctly in IE9, IE8.
Body font size is set to 12px but IE seems to ignore it completely.
Here's the CSS of body element:
body {
background: url(../images/background/bkgd.gif) repeat-x scroll left top #FFFFFF;
font: 12px/1.55 arial, helvetica, sans-serif;
color: #444;
text-align: center;
}
Here is the website. Can anyone please help?
There are inline styles in your HTML/Template. View source and search for 20px I found on line 99 something like below:
<div a align="right">
<span style="font-weight:bold; font-size:12pt;">Your local No1Pizza is <span style="font-weight:bold; font-size:20px;"><a href="/pizza.html">Wolverhampton.<span/>
<a style="font-weight:bold; font-size:8pt;" href="/index.php/emptybasket/ ">
(Not your desired shop?)
</a>
</div> </div>
You REALLY need to clean up the code. Also pay attention on the wrong closing tag <span/> above.
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;">
My application built with Google App Engine has this page that displays search results.
In my laptop the design and font size look fine (I use Chrome); but in the bigger display on a desktop with IE, the title looks huge and the text under the title is grayed out (it shouldn’t be). Below is the css that I am using. I appreciate your help regarding the design and any problems you see with it. Thanks.
css for the body (text under the title):
body { font-size: small; font-family: Verdana, Helvetica, sans-serif; }
css for the title:
#large {color: #0066CC; font-size: large; }
css for “comment”
#small {color: #808080; font-size: x-small; }
EDIT
In IE I also noticed that the text under the title is grayed out. What is the reason for that? This is the code:
self.response.out.write("""<p>
<span id=large>%s</span>
<span id="small">comments</span><br />
%s
</p>
""" %
(item.url, item.title, main_id,
item.pitch))
Try using percentages or pixel values instead of keywords for the font-size. Different browsers interpret those keywords differently, which is why you're seeing the discrepancy.
Not that this is the direct cause of the problem, but the first thing I notice is that you're using IDs instead of classes for styling multiple elements.
So this:
<span id="small">
should be:
<span class="small">
And your #small selector should be .small. Likewise goes for large.
Zach Rattner should have identified the real problem though.
alt text http://shup.com/Shup/372594/110528103234-My-Desktop.png
How to achieve this with this code.
Click to Donate to save rabits
a {background:url(rabit.gif); padding-left:70px}
I'm getting like this.
alt text http://shup.com/Shup/372599/110528103631-My-Desktop.png
I know it's possible if with change in HTML , but is it possible to achieve this with this code.
try this
a {
background:url(rabit.gif) no-repeat;
padding-left:70px;
width:50px;
font:bold 20px Arial, Helvetica, sans-serif;
float:left;
height:194px;
}
html
Click to Donate to save rabits
How about:
<img src="rabit.gif" />Click to Donate to save Rabits
and then:
img {float: left}