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.
Related
I am writing an emailed newsletter, and need to set an image as the footer, with a few clickable links over it. I have figured it out using both HTML and CSS, but no matter where I searched I could not find a way to do this strictly using HTML. Can anyone help me out?
<!--Footer-->
<tr id="footer">
<td id="footer" style="font-family: 'Titillium Web', sans-serif;;-webkit-text-size-adjust:none;background-image: url" img url"" templates\uuaemail-foot.jpg";padding-left:="" 20px;padding-right:="" 20px;padding-top:="" 10px;padding-bottom:="" 20px;"="">
<table height="101" width="602">
<tbody>
<tr>
<td id="footer" style="font-size: 10px;color:white;" height="95" valign="top" width="600" align="center"><p><br></p><p class="style3"><strong><span style="font-size: 12px;">admissions.rutgers.edu<br></span></strong></p><p class="style3"><span class="style7"><span style="font-size: 8px;"><strong> University Undergraduate Admissions</strong>, Operations Center<br>©2017 , an equal opportunity, affirmative action institution.</span></span></p></td>
</tr>
</tbody>
</table>
</td>
Is what I currently have (with CSS styling)
update: My issue is that the email is widely sent to Ms Outlook 2016, which I have both heard and seen through testing that it does not process CSS styles very well. When I opened this code in Outlook, it showed the CSS styling commands at the top of the message, and did not apply it at all.
CSS is just an organized way for the the stylesheet. Although not recommended, you can use inline styles with just the HTML to achieve almost everything, if you post your code, may be some of us can suggest a definite answer.
HTML is a markup language, it does neither add functonality or style by itself.
There are tags there the browser places default values.
Eg.
<footer> </footer>
The most browser add automaticly:
footer {
display: block;
}
Or the h tag
<h1></h1>
The most browser set the default values like:
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Every other style change has to be done by your self with css. You can also work with inline stlyes like:
<h1 style="color:red;"> A red big text </h1>
A good way to find more about default values and inline styles is: https://www.w3schools.com/
You want to use background image in your email and you want it rendered in outlook. Use this site http://backgrounds.cm/ to generate code for background image that will work in all outlook desktop versions. Then you can add links etc. over the image.
Also, please don't use same id more than once in your code. You can assign an ID to one element only. To cover multiple elements, use class attribute.
I have been trying to code fluid images in my HTML emails, and everything I find does not seem to work. I have tried
html
<img src="http://image.e.writersstore.com/lib/fe9b15737567067576/m/2/11569swwheader.jpg" alt="Learn, Market, Network" width="600px" height="274" border="0" style="display:block;" />
css
img {
max-width: 100%;
height: auto !important;
}
and just about every variation of it, inline and everything, but I cannot get it to work. Any suggestions?
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I am trying to display a list of images with text on my webpage. But in IE7, it is displaying each image below the other and not next to other. Looks like it is because of lack of support of inline-block. I read some articles and added some things to my CSS, but still it is not working.
He is the HTML:
<div id="image_example">
<div class="accept">
<h4>Acceptable</h4>
<img width="84" height="150" src="some-image" alt="accept">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="112" height="150" src="some-image"">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="215" height="150" src="some-image">
</div>
<divclass="unaccept">
<h4>Unacceptable</h4>
<img width="165" height="150" alt="unaccept" src="some-image"">
</div>
</div>
My CSS looks like this::
.unaccept, .accept{
display: inline-block;
text-align: center;
margin: 0 0.75em;
zoom:1;//Added after reading other posts
*display:inline; //Added after reading other posts
}
I added the last two lines after reading a lot of articles/ pages about this problem. But still it is not working.
I tried adding:
*width:173px to the class accept, but then it is breaking when the image width is more, if I increase the width width of all accept classes(even where the image width is less is getting increased, so the page does not look good again).
Can someone please help me out? All I want is to display these images next to each other with their default widths.
IE7 only supports inline-block on elements that are inline by default.
Use float: left; instead, that works with following the standards, without any IE hacks:
.image_example { overflow: hidden; }
.unaccept, .accept {
float: left;
text-align: center;
margin: 0 0.75em;
}
Demo: http://jsfiddle.net/Guffa/xCREN/
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>HAHAHA</title>
<STYLE TYPE="text/css" media="screen">
*
{
padding: 0;
margin: 0;
}
body
{
padding: 0;
margin: 0;
}
#flexbox
{
//display: -webkit-box;
//-webkit-box-orient: horizontal;
//-webkit-box-align: stretch;
//width: auto;
}
</STYLE>
</head>
<BODY style="padding:0;margin:0;border:0;">
<!--<div id="flexbox">
<img src="1.jpg" width="100px" style="padding:0;margin:0;"/>
<img src="1.jpg" width="100px"/>
<img src="1.jpg" width="100px"/>
</div>-->
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
</BODY>
</html>
Why do these images always have a small space in between them, even if i have padding & margin set to 0 on body and all other elements in page?
OK this is the full unedited code.
EDIT: just found out its the line break between the two IMG.
SO... i cannot press enter between the two elements? lol... :)
i cannot press enterin between the two elements? lol... :)
Nothing distinguishes one type of white space from another in most parts of HTML.
You can, however, format your code such:
<img src="..." alt="..."
><img src="..." alt="...">
… to remove the space between the elements.
images are displayed inline by default, which is likely your issue. White-space characters in HTML are condensed, however they will still appear as a space if any exist between HTML elements.
The following HTML will render with a slight space between images.
<div class="images">
<img src="http://placehold.it/400x300" />
<img src="http://placehold.it/400x300" />
</div>
If you'd like to make them flush against each other, you could try floating the images:
img {
float: left;
}
Floating comes with its own issues if you're new to CSS.
An alternative is to adjust the markup to get rid of extra white-space characters. A common way to do this is called "fishy" syntax:
<div class="images"
><img src="http://placehold.it/400x300"
/><img src="http://placehold.it/400x300"
/></div>
The way it works is that the closing > character of each element is moved to just before the beginning < character such that there's no white-space within any HTML element as content. Instead, the white-spaces for indentation are within the HTML tags, where the white-space is ignored completely.
There was a w3c feature request for a new property on white-space, which could theoretically allow CSS to remove all spaces from an element. The orignal proposal was white-space: ignore; however I much prefer (and suggested) white-space: none;.
It appears, however, that updating white-space is not likely to happen, and instead the suggestion was to use flexbox to remove spaces appropriately:
extending off the original HTML example:
.images {
display: flex;
}
Of course, it will be some time before flexbox has enough cross-browser support to be useful in a commercial environment, so for the time being I recommend sticking with the fishy syntax.
There's a good trick to overcome this:
Place your images inside a <div> and then set
font-size:0px;
to the <div>.
You can continue keeping the elements on separate lines.
I believe this is also necessary if you are viewing in an older version of IE
img {
border:0
}
While I think the problem is coming from another point in your mark-up, and/or CSS, I would suggest ensuring that you've zeroed out both margin, padding and border for the img element:
img {
margin: 0;
padding: 0;
border-width: 0;
}
This should take care of the problem, but if not we may need to see your real html and css (or a live demo that reproduces the problem, at JS Bin, or JS Fiddle) to help you further.