I have edited this awesome template to be used for an email marketing campaign. It looks fresh and clean, and seems to be able to serve us well. In Gmail it looks good, it has slight oddities that I cant fix because I think it deals with how gmail reads the code. But its super usable.
But if someone uses outlook to read our email, the message is all messed up. the bullet points are all messed up and not formatted. Here is some code:
<td align="center" valign="middle" bgcolor="#68696a">
<ul align="left">
<li align= "left" style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:15px"><strong>Exterior Photos</strong></li>
<li align= "left" style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:15px"><strong>360 Video</strong></li>
<li align= "left" style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:15px"><strong>Social Media </strong></li>
<li align= "left" style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:15px"><strong>Fast Results</strong></li>
<br>
<br>
</ul><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#ffffff; font-size:16px"><strong>Find Out More!</strong></font>
</tr>
<tr>
Are there any tips when working with outlook?
THe bullet point looks like this in outlook
-blah
-blah
-blah
-bah
google looks like:
> -blah
> -blah
> -blah
> -blah
The fact is that Outlook uses Word for rendering HTML markup of messages. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles in MSDN:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Related
So, after I tried all the answers in the forums over here, the font size of my webpage won't change. Here's what I currently have:
<font size="40px" face="Didot">Hello</font>
Okay, it will set to 40px, but if I try to make another one using 20px it won't change the font size:
<font size="20px" face="Didot">World</font>
Whole code for those who want to check for themselves
<html>
<font size="40px" face="Didot">Hello</font>
<font size="20px" face="Didot">World</font>
</html>
<font> tag is deprecated. ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font )
Use CSS styling instead. See the example below.
.size40 {
font: 40px/1.5 Didot, serif;
}
.size20 {
font: 20px/1.5 Didot, serif;
}
<span class="size40">Hello</span>
<span class="size20">World</span>
If you are looking for ways to do inline styling you can follow this approach
<html>
<div style="font-size:40px; font-family:Didot">Hello</div>
<div style="font-size:20px; font-family:Didot">World</div>
</html>
But I would recommend to create a separate css file and define styles there. And import those styles in your html using script tags
As said in the previous answer the source is deprecated but if you insists on wanting to try you can use the following:
<font face="Verdana, Geneva, sans-serif" size="+7">Hello</font>
<font face="Verdana, Geneva, sans-serif" size="+4">World</font>
If it still doesn't work, use CSS:
<p>Hello</p>
<p>World</p>
⠀
p:nth-child(1){
font-family: Didot;
font-size: 40px;
}
p:nth-child(2){
font-family: Didot;
font-size: 20px;
}
Trying to add a color and Font family within a H1 tag together using style still it not works.Color property does not have any effect on my current line
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif"color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
Why Text is not colored?
Because you separate between css properties using " and it is wrong the style attribute written as follow style="" and inside the double quotes you should write you css properties and separate between them using ; like this
style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF"
Got a little typo there..
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
I am using the css text font "Century Gothic, Arial, Courier New, Sans-Serif" for my text on a webpage, however whenever I use the £ character, it does not show correctly on browsers (browsers test on are Firefox, Explorer, Chrome & Safari).
HMTL:
<span>£</span>
SPAN CSS:
font-family: Century Gothic, Arial, Courier New, Sans-Serif;
The above £ text shows as a question mark within a black diamond. Does anyone know why this is happening? Or do I just need to pick a different font family to display £ signs? All other text/characters on the page using the same font family show correctly
you have to use £ for the £ sign.
it will show correctly on all the browsers.
for eg.
CSS:
body { font-family:Century Gothic, Arial, Courier New, Sans-Serif;}
HTML:
<span>£</span>
Try adding metacharset to your <head>
<meta charset="utf-8">
I've been doing the web course on Codecademy and I'm stuck on the "Styling the font!" task.
Any ideas what I'm doing wrong?
<li style= "font-family: Garamond; size:16px">This item is big Garamond.</li>
<li style= "font-family: Bodoni; size:12px;" >This item is medium Bodoni.</li>
<li style= "font-family: Futura; size:10px">This item is small Futura</li>
Thank you for all your help!
Remember that most computers only have a limited amount of fonts installed: http://web.mit.edu/jmorzins/www/fonts.html
It's best practice to specify fall-back fonts too incase the users computer doesn't have the first font specified e.g.
font-family: arial, helvetica, georgia, verdana, sans-serif;
So if the computer doesn't have arial installed it will go down the list until it finds one it does have installed and it will display that.
Also you've declared size wrongly. It should be...
font-size: xxx;
"size" should be "font-size".
<li style= "font-family: Garamond; font-size:16px">This item is big Garamond.</li>
<li style= "font-family: Garamond; font-size:16px;">This item is big Garamond.</li>
<li style= "font-family: Bodoni; font-size:12px;" >This item is medium Bodoni.</li>
<li style= "font-family: Futura; font-size:10px;">This item is small Futura</li>
Try this:
<li style = "font-size: 16px; font-family:Garamond">This item is big Garamond.</li>
<li style = "font-size: 12px; font-family:Bodoni">This item is medium Bodoni.</li>
<li style = "font-size: 10px; font-family:Futura">This item is small Futura.</li>
Defining font-family properties?
you could use multiple fonts like this font-family: arial, verdana, "Cooper Black";
Defining font size?
define like this font-size: 16px;
Alternatively you could define these font properties simultaneously like this font: 16px arial, verdan, "Cooper Black"; or font: 16px arial; or font: 16px/20px arial; below is line-height.
<html><head></head>
<body>
<pre style="word-wrap:break-word;">
<HTML><head> <style>.header { color: black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt }.footer { color:black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; font-style: italic; } .body-header { color: black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; font-weight: bold; } .body-content { color: black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; }</style></head><body><p class="header">This is to notify you that you have an account balance that is greater than or below the threshold viewable on Online Banking for Business. The requested details appear below. <br></p> <span class="body-header"> Account Number: </span><span class="body-content"> xxxxxxxxxxx </span><br><span class="body-header"> Balance Amount: </span><span class="body-content"> 110,xxx.95 </span><br><br><p class="footer">This e-mail and any attachments may contain confidential and privileged information. If you are not the intended recipient, please report to gtmxxxxdesk#xxx.com or call 1-800-xxx-6xx4, and please delete this e-mail and destroy any copies. Any dissemination or use of this information by a person other than the intended recipient is unauthorized and may be illegal.<br></p> <p class="footer">Alert initiated: 08-Sep-2011 at 11:35AM Canada Eastern Time<br></p> </body></HTML></pre>
</body>
</html>
When I put the above html in a file, save it as .html, and open it in IE/FF, the Account Number: is not aligned proeprly to the left. Why is this?
I know there are multiple <html> , <head> and <body> tags, but for now, these are constraints i need to work with. i.e. I cannot get rid of them :)
EDIT: Also, on my browser, there seems to be 2 line breaks between the text:
Any dissemination or use of this information by a person other than the intended recipient is unauthorized and may be illegal and the subsequent line : Alert initiated.
Although there is only 1 <br>
That's because you have spaces before the text. Inside a pre tag the spaces are interpreted as literal, and are not removed or collapsed.
As long as the HTML code is as broken as it is, you can't really expect any consistent result. Browsers will try to make the best out of it by simply ignoring some of the tags, and each browser will do it differently.
Aha! I have found the problem.
You need to remove the spaces between the </p> and <span> tags =).
Like so:
<br></p><span class="body-header"> Account Number:
Changing this:
</p> <span class="body-header"> Account Number:
to this:
</p><span class="body-header"> Account Number:
Seemed to work for me... jsFiddle