Our HTML email templates look great in every ESP except outlook 120 DPI. The suggested blog tips to this point have not worked.
Has anyone tried using PNG images instead ofJPG images in their emails? Has this helped solve image rendering issues or caused and additional issues?
I've tried editing my tables and media queries through various blog tips such as the ones in https://litmus.com/blog/mastering-outlook-a-look-back-at-common-rendering-issues. I can get every ESP to render our templates properly, but not Outlook 120 DPI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=edge" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<title>Smartsheet</title>
<!-- Default Styles -->
<style type="text/css">
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
table {
border-spacing: 0px !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
table-layout: fixed;
}
table table {
table-layout: auto;
}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {
color: #363639;
}
#-ms-viewport {
width: device-width;
}
h1, h2, h3, h4 {
font-weight: normal;
}
The code above should contain the basic CSS needed to understand my problem and the HTML. As yo should be able to see, the image in the tile is blown out of proportion. This happens for all of our images in outlook 120 DPI .
Outlook 120DPI will look bigger because that is the entire point of it. It's a zooming feature.
If it doesn't scale properly, you need to add the following code, courtesy of Email on Acid:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
Related
This is the question about Google chrome dev tools and CSS. As following codes, though I input "#media (max-width:1000px)" on style sheet of VSCODE, the tools change to Responsive Web Design at 750px(75%). I don't zoom, and write "viewport" on html. Also the scale is 1.0. Please tell me the solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>
div {
width: max(400px, 50%);
height: 400px;
background-color: coral;
}
#media (max-width: 1000px){
div {
background-color: blue;
}
}
As of my comment, the cause was the zoom of page. By putting back the zoom, I could solve the question.
I am trying the code in the link shown below for responsive layout design.
1) As it it, if the CSS code is included in the html code displays perfectly as expected
2) But if I move the exact CSS code as a different file and link to it from the html code, visually the boxes layout don't work so well. The result seems similar in different browsers.
Would someone know the reason for that? I was expecting to get more similar visual results
Also would it be good in general for a website html code to include the css in the html code as in (1) or as a different file as in (2)
https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_blog
Here is the code I used to link to css file
<!DOCTYPE html>
<html lang="en-US">
<body>
<head>
<title>My page</title>
<link rel="stylesheet" href="styles.css">
</head>
here is the top code of the CSS sheet
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
And here is a screenshot of the result
edit
reviewed css sheet code after Lunex answer (top part)
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
Create a css file. Let's say you name it "style.css".
In this file you put all the content which is in the < style > tag.
In your html file inside the head tag you add:
<link rel="stylesheet" href="style.css">
This should be working, considering you've done everything right.
Edit for your edit:
You don't need html tags in your css file.
The content of the html file should be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the body content here -->
</body>
</html>
The content of your css file should be:
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
// ...
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
I want to use the meta tag and set the css, the font-size is 30px, but when I typing more code in tag p, the font-size became 38.317px in Chrome browser; please tell me why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<title>Document</title>
<style>
p{
word-break: break-all;
font-size: 30px;
}
</style>
</head>
<body>
<p>ssssssss</p>
</body>
</html>
I tried your code and both Chrome and Firefox don't change the font-size.
Please take a look at the following test site:
http://adroity.be/ys/test.php
When refreshing the page in IE11 you will notice that sometimes the final 'e' is not showing. It does show as soon as you hover over the title. I don't have access to other versions of IE so I don't know if this is limited to IE11.
I'm using a Google Font (Oswald). Here's the relevant code:
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Oswald:400,300,700'>
<link rel='stylesheet" href='style.css'>
</head>
<body>
<h1>YellowSubmarine</h1>
</body>
</html>
STYLE.CSS
body {
font-family: "Oswald",sans-serif;
}
h1 {
font-size: 130px;
}
h1 a {
font-weight: 700;
text-transform: uppercase;
}
Frankly I have no clue how to start troubleshooting. Any help is greatly appreciated.
In my main CSS file, I have my a:link selector set to display links in White.
a:link{
color: white;
}
However, I want links in another DIV (.menuItem) to be black.
I am trying
.menuItem a:link{
color: black;
}
can't seem to get it to work, so it's probably wrong..
Can anyone lend a hand on this one?
.menuItem a:link{
color: black !important;
}
With respect to Chacha102, I don't think the solution is ideal. !important is a kludge, and a better way to handle this would be to make use of the document structure to add some specificity. Assuming your .menuItem elements have a common parent, perhaps a div with an id of menu, you could revise your menu-specific link style as follows:
#menu a:link {
color: black;
}
The extra specificity should cause the more specific rule to take effect for those menu items.
Working on a sample code now. But Is your div tag having an Id of menuItem or a class of menuItem? This is my guess.
Edited : Okay, now I see. If you separate the css to another file and use a link tag to import it in, then it should be fine without using the !important command, see this :
body {background-color : green;}
a:link{ color : white;}
.menuItem a:link
{
color : black;
}
And this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test page</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div>
This is a link
</div>
<div class="menuItem">
This is a link in div menuItem
</div>
</body>
</html>
Hope this helps:)
Still, if I embed the css snippet into the html, then it doesn't work... Wondering why?