why is outlook removing the spaces between my images - html

I have 4 small images lined up horizontally as shown below
<span style="font-size: 10.0pt; font-family: Verdana, Tahoma, Geneva, sans-serif; color: gray">
<img src="image source">
<img src="image source">
<img src="image source">
<img src="image source"><br /> </span>
when i run the code, browsers diplay these for images with the right space between them, but if i run the code using outlook the test it, the images do not have the spacing between them. I understand this is an outlook problem but is there a way to solve these issue, i have tried adding padding style and margin stil to each image but that does not help. How can i get around this problem to add spaces between these images.

Outlook tends to ignore most of CSS and almost anything you put into a "style" attribute, so your most reliable option here is to insert (non-breaking space) entities between the images.

Related

Image in Email Signatures

I'm creating an email signature which has image icons to be displayed. The problem is some people can see the images and but for others, the images are not loaded and show blank box. Here is the code:
<a style="color: white;"
href="https://www.youtube.com/landor" style="text-
decoration:none"><img style="color: green; font-size: 6px;
font-family: Georgia, serif; width: 34px;"
src="https://dnohehtvi22a2.cloudfront.net/YoutubeIcon.png"
alt="YouTube" /> </a></span></p>
I read that some email clients block HTML emails images. Do you think this is the only reason? Does anyone know a better way of creating this?
Thank you,
Make sure you get the basics right, i.e., specify a hex value, and use the width and height attribute:
<img style="color: #00ff00; font-size: 6px; font-family: Georgia, serif; width: 34px;height:24px;" width="34" height="24" src="https://dnohehtvi22a2.cloudfront.net/YoutubeIcon.png" alt="YouTube" />
You can't do anything about Outlook and other email clients that block images by default. There are techniques that try and embed the image, but they still don't get around this image blocking (where the user simply has to click to start the download of images).

Sizing logo for Outlook desktop

I am building emails using a Drag & Drop editor in a CRM (Dynamics 365 w/ ClickDimensions). For the logo, I am using HTML to insert an image. The logo shows up fine for every email client except Outlook desktop. Here it shows up full-sized and ignores the inline styling. If I add "width= ... " inline with the img, it shows up smaller, but it's oriented in the top left of the email instead of where it's supposed to be.
I found the following conditional and tried to make it work, but it's not doing anything.
<div style="box-sizing: border-box; white-space: normal;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.42857143; word-wrap: break-word !important; white-space: normal; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<!--[if (gte mso 9)|(IE)]>
<style>
#logo {
max-width: 130px !important;
padding-left: 40px !important;
}
</style>
<![endif]-->
<img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" alt="South University Logo" style="max-width:130px; display:block; margin:auto;">
</div>
I cannot write any code outside of the that is given in the box, this is not a full-fledged html editor. Anything outside gets erased. Any ideas on what I can write to make the logo appear properly in Outlook? Thank you!!
If you can't write code beyond that box, you're going to have to live with the logo being the incorrect size in Outlook.
Outlook is problematic when it comes to images. It will display images at the size they were created and ignore your inline style width declaration. The fix is to add width="130" to the <img>.
An example:
<img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" width="130" alt="South University Logo" style="max-width:130px; display:block; margin:auto;">
The image size is actually 344x161 and I am guessing Outlook is displaying it at that size. Either resize the image or add width="160" to the <img> or live with the issue.
Good luck.

HTML code with no CSS support

Here is the situation. I want to edit the HTML in my forum but there is no CSS support. I have included what I have, barring I didn't screw it up. What I want to do is put the three elements after the opening text side by side, in line. Next I want to do the same with the last to elements, the hit counters. My working knowledge is limited and I have tinkered to the last of my patience. I am a amateur, self taught, noob, whatever you want to call it so forgive my lack of knowledge.
<p>Click on the Iowa state icon to view members in your area of the state. To be placed on the map with what you are interested in finding click on the "Pop Smoke" icon and post your state, county and interest on the "local Patriots" group page. In order to view the Iowa Constitution click the Constitution icon.</p>
<p><img class="align-center" src="http://i68.tinypic.com/331lr0i.jpg" alt="" width="150"/></p>
<p><strong><strong><img class="align-center" src="http://i63.tinypic.com/e5qw7l.png" alt="" width="125"/></strong></strong></p>
<p><img class="align-center" src="http://i68.tinypic.com/znrh28.jpg" alt="" width="200" border="0"/></p>
<p><img alt="" src="http://api.ning.com:80/files/nkvdZEQNy6zCn2jimzPD4qqESNX8HVjut48i5dAhMIf3v26qIZPzpAG6BqDSJKGk2ZV*G7wvlRG2*j3zCkGfOUKCqKyc83y1/alumbar.gif" width="540"/></p>
<p><a rel="nofollow" href="http://www.reliablecounter.com" target="_blank"><img src="http://www.reliablecounter.com/count.php?page=modernmilitiamovement.com/group/iowa-state-group&digit=style/plain/6/&reloads=1" alt="" title="" border="0"/></a><br/><a rel="nofollow" href="http://www.reliablecounter.com" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;">Unique visits</a></p>
<img src="http://www.reliablecounter.com/count.php?page=modernmilitiamovement.com/group/iowa-state-group3&digit=style/plain/6/&reloads=0" alt="" title="" border="0"/></a><br/> <a rel="nofollow" href="http://www.curinglight.com" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;">All visits</a></p>
You're using inline style ("style=...") already. Paragraph elements display "block" by default, which means they will each start a new line and span the the entire width available to them.
I'd suggest wrapping each set of tags you want vertically aligned together in a div and either change the display styling of your paragraphs or remove some of them.

removing white space between images using html

After reading a number of answers to this problem, it seems none of them have solved the problem. I'm trying to send and email via VerticalResponse and they use html. The message is created stacking multiple images, each with links, but it's supposed to look like one image. Problem is that the preview looks good and so does viewing it in a webpage, but email display shows white space between each image. See http://jsfiddle.net/xMW7N/42/ for code. Please help!
<body>
<div style="text-align: center; ">
<span style="font-size:8pt;"><img align="normal" alt="Facebook - MetricRunFest" border="0" height="126" hspace="-20" name="FB" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Top.jpg?0.7593426643870771" style="width: 600px; height: 126px;" title="Facebook - MetricRunFest" vspace="0" width="600" /></span><br />
<span style="font-size:8pt;"><a href=website"><img align="normal" alt="Metric Runners - Online Photos" border="0" height="205" hspace="-2" name="MetricRunFest - Online Photos" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank.jpg?0.8384064519777894" style="width: 600px; height: 205px;" title="Metric Runners - Online Photos" vspace="0" width="600" /><br />
<img align="normal" alt="website" border="0" height="127" hspace="-2" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank_UpsideDown%209.jpg?0.44395816628821194" style="width: 600px; height: 127px;" title="website" vspace="0" width="600" /></a></span><br />
Different browsers treat white space differently. It's good to write everything on 1 line if possible, with no needless spaces or newlines.You can try like this:-
<span><img src="image1.jpg"></span><span><img src="image2.jpg"></span><span><img src="image3.jpg"></span>
There is a breaking space between every image which is part of the problem. Also, try giving the images display: block style.
http://jsfiddle.net/xMW7N/47/
Everything I have seen on html emails, and from the experience I have in doing them myself, the best option is using tables, unforunately. It can really help with all layout problems.
I'd recommend reading http://24ways.org/2009/rock-solid-html-emails for a lot of tips, including an entire section on images. Especially using img {display:block;} for Hotmail and align such as <img src="image.jpg" align="right"> instead of floats.
Not that you are necessarily doing those parts wrong, but they are good to remember in general.

<br /> HTML tag not cross-browser compatible

I have an issue with the HTML <br /> tag.
I have 2 images above each other.
With no <br /> between the two, the bottom border of the top image touches the top border of the bottom image which seems to be what it is supposed to be.
Then if I put 1 <br />, there should be some space between the 2 images. If I put 2 <br />, there should be even more space.
Here is the problem
Firefox version 3.5 seems to ignore the first <br />. If I put 2 then it puts some space between the 2 images.
IE7 puts some space between the 2 images even if I don't put any <br />
Things work fine in Chrome or Safari, i.e. there is no space with no <br />, some space with 1 <br />, more space with 2, etc...
I have not tested in IE8.
Is there a way to get around the fact that browsers don't seem to interpret the <br /> tag the same way?
Thanks for your insight!
Try using css to position the images rather than relying on the br tag.
img { display: block; margin: 0 0 20px 0; }
For example.
First of all you should make sure that you have a valid doctype on the page, so that it renders in standards compliant mode. That will minimise the differences. W3C: Recommended list of DTDs
The <br /> tag is not HTML, it's XHTML. If you are using HTML you should use a <br> tag instead.
If you don't have any break between the images, they would be displayed on the same line. If there isn't room for that, the browser will break the line and place one image on the next line. If you add a break between images that has already been broken into two lines, that makes no difference.
However, in some modes some browsers make a difference between images that are by themselves and images that are part of a text. Adding a break between the images means that they are part of a text, and the browser will display the image placed on the base line of a text line. This means that there is some space below the image that is the distance from the base line of the text line to the bottom of the text line, the space used for hanging characters like g and j. Depending in the size of the images and the line height, there may also be some space above the image.
To ensure that the images are not displayed as part of a text you should turn them into block elements. You can use the style display:block; for this. You can also use float:left; or float:right; to make an image float, that will automatically make it a block element.
The size of the br element depends on the font size/line height. Have you considered just setting display block on the image elements and setting a bottom margin, and maybe adding a 'last' class on the last one so it doesn't have a bottom margin?
<!doctype html>
<style>
body { background:gray; }
div#gallery .row img { display:block; margin:0 0 1em; }
div#gallery .last img { margin-bottom:0; }
div#gallery .row .thumb { float:left; width:5em; }
div#gallery .row { clear:both; width:50em; overflow:hidden; }
</style>
<div id="gallery">
<div class="row">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
</div>
<div class="row last">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
</div>
</div>
Though in this example it'd be easier to set a bottom margin on the row itself.
if you want to use the tag you can do it so :
<br style="line-height:?px; height:?px" />
where ?px = how many px it`s needed to show the result you need
OR
you could use:
<br clear="all" />
it should work...
if you want to use CSS you could do it so :
<style>
img.newline{
display:table-row;
}
</style>
<img src="1.jpg" class="newline"/>
<img src="2.jpg" class="newline"/>
it should work.. these are quick ways to do it.. you can use css and make something great.. but what i wrote here are "quickies" and most simple/fastest ways i thought of.
The br element is a presentation element that offers no descriptive value. Most browsers tend to apply default presentation to different elements that can differ slight from browser to browser. So, I would strongly recommend not using the br element and instead using a span tag and CSS to ensure your presentation is uniform across various browsers.
Are you set up like this?
<img src="1.jpg" />
<img src="2.jpg" />
The correct behavior is actually to not line break between the images, they should appear on the same line. The first BR tag added should bring the second image to a new line, then the second BR should create a gap.
It might fix it if you specifically tell your images to line-break themselves, so they appear on separate lines even without a BR.
I would add one thing to DanTdr's response. If you don't add a small font size for the BR tag then you run into problems in IE because of it's hasLayout behavior. The BR would be a minimum of 1em.
<br style="line-height: ?px; height: ?px; font-size: 1px;" />
After being frustrated for some time with not getting BR tags to render the same in Firefox and IE this font-size: 1px; style finally made my layout appear the same in both browsers.