I am using a Mailchimp and their template for our email marketing. I added the outlook specific CSS code, but it still isn't showing correctly in Outlook. Any suggestions?
Here is part of the header:
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
/** Outlook 07, 10 Padding issue: These "newer" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table. The issue can cause added space and also throw off borders completely. Use this fix in your header or inline to safely fix your table woes.
More info: http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/
http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/
H/T #edmelly
Bring inline: No.
**/
table td {border-collapse: collapse !important}
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button */
.ReadMsgBody{width:600px;} .ExternalClass{width:600px;} /* Force Hotmail to display emails at full width */
.yshortcuts, a .yshortcuts, a .yshortcuts:hover, a .yshortcuts:active, a .yshortcuts:focus{background-color:transparent !important; border:none !important; color:inherit !important;} /* Prevent Yahoo! from styling links */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table, td{border-collapse:collapse !important; mso-table-lspace:0pt; mso-table-rspace:0pt;}
#bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
#bodyCell{padding:10px;}
.templateContainer{width:600px;}
sorry but what exactly is not displayed properly in your email? Try to look at other templates like http://zurb.com/playground/responsive-email-templates. They should give you better idea of reliable structure and css. You NEED to inline your css, its standard for email newsletters - its the only way your going to get a consistent look, especially in gmail!
You can streamline your template to a more convenient one but heres my 2c:
I suggest you use a tool like litmus, this will allow you to test the rendering of your marketing emails on any email app/browser/device combo.
Related
I am using Laravel-Snappy for generating pdfs with wkhtmltpdf. I want to add a border in all pages that are created in the pdf file. At the moment, I have added this to the css:
body.pdf {
border: 1px solid #000;
}
My pdf html is like this:
<html>
<head>
<title>{{ $title }}</title>
</head>
<body class="pdf">
.....
</body>
</html>
With the above css, the border shows fine if it is a single page pdf. However, when it has multiple pages, the border breaks at the bottom of the first page and no more border shows from page 2 onwards after the page-break. I also read the documentation and I dont think there is an feature to add borders using setOption().
Is there a way to resolve it so the border appears in all pages when pdf is generated?
Please take look at here, you can find all available options available including border.
You didn't mentioned how you used page break.
I am using this way
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
Working fine for me
I've been making websites for a few years now, but only recently have I started using the html5 doctype and today I discovered the behaviour where a padding-bottom of 4px is added to images.
The padding disappears if you change the doctype to xhtml1.0
here is the simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technic-Al</title>
<style>
html, body {
margin:0;
padding:0;
}
#contain {
width: 900px;
background-color:#6C0;
}
</style>
</head>
<body>
<div id="contain">
<img src="images/head.gif" width="900" height="100" border="0" alt="head">
</div>
</body>
</html>
changeing the doctype to any of the others removes the bottom-padding (green from the background)
Quite a few people have come on here to suggest the fix
line-height=0
I believe there is another fix that works as well.
Or should I say "work-around"
but surely this is a bug with the html5 doctype?
who do we speak to about it?
who deals with a bug like this?
how do we get it fixed?
Does anybody here know how to get this fixed?
It's not a bug, it's what the CSS spec says should happen. It's not HTML5 specific, the HTML 4.01 strict and XHTML 1.0 strict doctypes will do the same thing.
It's not padding - it's the consequence of the computed height of the line box.
There's no hope of getting it changed, Too many web pages depend on the existing behaviour.
The appropriate authority for this is the W3C CSS working group.
I had an issue where page was showing padding in bottom of page
img { display:block ; }
writing above in css file solved my problem. Hope this help
Use the vertical-align property in your css :
img{
vertical-align:top;
}
I need to change Font Size of Page Items Help Text in Oracle Apex. How could I do this?
The Apex item help usually (maybe always?) has a class of "instructiontext". So you can define attributes for this using CSS. If you have a CSS script you can add an entry to it like this:
.instructiontext {color: red; font-size: 300%}
Otherwise you could simply add some inline CSS in the page template header like this:
<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com">
<head>
<title>#TITLE#</title>
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_20/theme_3_1.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_20/ie.css" type="text/css" /><![endif]-->
#HEAD#
<!-- Add this -->
<style type="text/css">
.instructiontext {color: red; font-size: 300%}
</style>
<!-- End of my CSS -->
</head>
<body #ONLOAD#>#FORM_OPEN#
The result:
Ok, I know this is a seriously old post I'm digging up, but this post is what I ended up at, while searching for "instructiontext".
Anyway, I have new information. Tony's solution still works in APEX 5.0, but somewhere since between then and APEX 19.2, things got changed by Oracle. It appears that nolonger is the class "instructiontext" being applied, but instead the class "apex-help-dialog".
So, if you extend the CSS-definition like so:
.instructiontext, .apex-help-dialog {color: red; font-size: 300%}
it will work in both versions. This should prove convenient while transitioning your application from say, APEX 5.0 to APEX 19.2, like we are doing.
Hopefully this will be of some use to anyone.
Imagine a fairly simple HTML document
<!DOCTYPE HTML >
<html>
<body>
<table> <tr> <td> This is a test </td> </tr> </table>
</body>
</html>
where we are applying this css
body {background-color: ffffff;
font-size:100px;
font-style: normal;
font-family: MankSans,Arial,Helvetica, sans-serif;
}
In every single modern browser out there the font properties will apply. in my WebView however, they wont.
Looking around I found out that the problem is that the WebView goes into quirksmode, where the td tag lacks inheritance so the body css doesnt apply.
Im aware that there are ways around this, like using a more explicit 4.01 doctype, or adding this to the css
table, thead, tbody, tr, td, th {
font-size: inherit;
font-family: inherit;
}
these however dont fix the root of the problem, which is that WebView decides against all logic to suddenly "missunderstand" the HTML5 doctype and switch to quirksmode, when all other WebKit-based browsers (Safari, Chrome, etc) behave correctly.
Is there any way to programmatically fix this?
Ok, my stupid mistake
it turns out that the doctype is getting screwed because before sending the HTML document to the webview im treating it, and adding an internal ID to all tags (this internal ID is required for features inside my app)
but in case someone screws up in the same way I did and wonder whats going on, I'll offer a lenghty explanation.
DOMDocumentType has several fields, among them you have name, publicId and systemId.
for example, consider the typical HTML 4.01 transitional doctype
it can be divided in
name = html
publicId = -//W3C//DTD XHTML 1.0 Transitional//EN
systemID = http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
and you can add a Custom ID to it as long as the format is preserved, like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" CustomID="1">
the problem with the HTML 5 DOCTYPE is that while it looks like a)
<!DOCTYPE html>
for the DOM, it actually is b)
<!DOCTYPE html PUBLIC "" "">
long story short, adding my CustomID="1" at the end of a) caused the DOM to not recognize it as a valid DOCTYPE, hence switching my WebView into quirksmode. If you want to have an HTML5 DOCTYPE and add a custom id to it you should do
<!DOCTYPE html PUBLIC "" "" CustomId="1">
w3schools.com tells us that the id attribute is not valid in: base, head, html, meta, , script, style, and title.
they should warn us that, poorly placed, it can also screw your DOCTYPE =)
In windows XP mode IE8 browser when user type password only the curser moves the bullets is not showing up.Any body crossed across this situation.I want my user to display what ever they type as bullets in the field
Perhaps you are using Google Web Fonts, or something else other than standard fonts?
Try putting this in your page's <head> tag:
<!--[if lte IE 8]>
<style>
input {
font-family: Arial;
}
</style>
<![endif]-->
Make sure to replace input with whatever CSS selector it takes to override the font-family.