If I use styling in my outlook, it won't work.
how can I fix it? I am talking about this style code:
<div id="BodyID" Style=" word-spacing:2px; min-width:0px; min-height:0px;max-width:693px; max-height:490px; height:485px; background-color:#f4f4f4; border:1px solid #e4e4e4; font-family:Arial;">
Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
Maybe this can help http://www.campaignmonitor.com/css/ It's a table, what is supported in E-Mails
edit
min|max-width|height not supported
http://htmlemailboilerplate.com/
I've been using that as a base for my HTML email campaigns.
And the link yunzen posted to campaign monitor is a great resource.
The MSDN article superlime linked to tells the sad story: for whatever incomprehensible reasons, Microsoft reverted nearly 10 years in their handling of HTML email w/Outlook2007, and did not see fit to fix it in 2010.
Having taken the trouble to design a well-formatted HTML layout for rest of the universe of mail user agents, I do see one saving workaround, which is what I'm going to direct my users to, rather than spend my time trying to reconstruct ancient HTML:
Use the VIEW IN BROWSER option Outlook offers for reading an email message. That re-assembles the HTML as intended.
Try adding 3 columns table, click on the example link below.
Example: Link
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="400">
<table border="1" cellspacing="0" width="100%">
<tr>
<td>
Content here...
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
Related
We have an asp.net master page that defines our web application layout using Tables. The goal is to have the content page take up the entire available screen real estate after having displayed the header and footer. This works for us fine in IE but does not work as intended in Chrome or FireFox.
What happens with Chrome and FireFox is that the content section expands only to wrap the content, which, in instances like a welcome screen ends up taking only a small portion of the screen leaving a big blank section at the bottom of the screen.
Here is a basic example of how our layout is structured:
<table style=height:80%;width:100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<!--Header Banner goes here This displays fine-->
</td>
</tr>
<tr style="height:100%" valign="top">
<!--Content Goes Here. Problem is that page only expands
as much as its content section vs filling up the whole page. -->
</tr>
<tr>
<!--Footer Goes here. This works fine!!-->
</tr>
</tbody>
</table>
Your problem is that you're using tables for layout. This would be easily achieved with proper HTML using something like a sticky footer (http://ryanfait.com/sticky-footer).
I'd recommend grabbing the HTML5 boilerplate or similar (http://html5boilerplate.com) and working from there.
If this is an existing web app that you can't change the HTML of then Javascript might be a solution...
There is no good way to specify in CSS that a element should be at least as high as the screen. You have to resort to JavaScript.
Since determining the height of the client are of the screen is again something that every browser version might do slightly differently, it is safest to use jQuery:
// tableID is the ID of your element that you want to take up the space
$("#tableID").height($(window).height());
You are missing some <td></td> and " in your code.
Also add
html,body {
height:100%;
min-height:100%;
}
to the StyleSheet. And HTML is
<table style="height:80%;width:100%;background-color:yellow" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" style="background-color:red">
Header Banner goes here This displays fine
</td>
</tr>
<tr valign="top">
<td style="background-color:green;height:100%">Content Goes Here. Problem is that page only expands as much as its content section vs filling up the whole page.</td>
</tr>
<tr>
<td style="background-color:blue">Footer Goes here. This works fine!!</td>
</tr>
</tbody>
</table>
Live preview >> jsfiddle
Set margin-top:0px in your content tr tag
Is it possible to draw a dynamic bar graph in email body. (need to be compatible with Outlook)
I need to draw a graph in email sent through oracle database and dynamic value will be passed through a procedure.
The best solution is to create your bar chart dynamically then transform it into an image. You could simply use print screen for this and import it into Photoshop or whatever and edit the image there.
HTML emails are notoriously bad things in that they respond best to html code from 10+ years ago.
Some basic guidelines:
Don't try to use HTML5 in an email.
Don't try to use fancy CSS or link to an external stylesheet or even use css styles in the HEAD.
Don't try and use javascript as it won;t work
Don't try and use Flash as it won't work.
DO use inline CSS
DO use HTML TABLES for layout
DO use images but try and keep the filesize as small as possible.
You could use something like google charts to create a dynamic image (passing through the correct data sets) that you embed into your html email.
http://imagecharteditor.appspot.com/
http://www.jonwinstanley.com/charts/
You can't do anything with JavaScript, because email clients don't parse it.
But you can tell your server to set a header on the file to make it a JPEG or GIF. The file extension should also be jpg or gif, because some email clients freak out at rendering an image that doesn't have an extension, or has a non-image extension. Not sure what you're using server-side but most have some kind of dynamic image producing library.
Alternatively, render the graph using tables.
<table>
<tr>
<td colspan="10" bgcolor="pink"></td>
</tr>
<tr>
<td colspan="5" bgcolor="pink"></td>
<td colspan="5" bgcolor="white"></td>
</tr>
</table>
You get the idea. Unfortunately, you'd have to write something to generate the relevant HTML.
This has to be done the "old" html way. Meaning with tables and plain images.
Let's say you want to create a bar graph with 5 items. You create a table with all the cells you need, and then you would have, let's say 5 different images you would scale dynamically vertically when sending the personalized email. Every image is just a solid block of, let's say 10x10px in 5 different colors. You would override the size of the image to the size of the block for every email sent. Then you would place the substitute pattern of your emailer application (i.e. %%variable%%) and use the right values for every single email sent.
for example:
<table border=0>
<tr>
<td align=bottom><img src=redblock.gif width=20 height=%%height1%%></td>
<td align=bottom><img src=greenblock.gif width=20 height=%%height2%%></td>
<td align=bottom><img src=yellowblock.gif width=20 height=%%height3%%></td>
<td align=bottom><img src=blueblock.gif width=20 height=%%height4%%></td>
<td align=bottom><img src=greyblock.gif width=20 height=%%height5%%></td>
</tr>
<tr>
<td colspan=5 bgcolor=#000000 height=1><img src=singlepixel.gif width=1 height=1></td>
</tr>
<tr>
<td>Spain</td>
<td>France</td>
<td>US</td>
<td>UK</td>
<td>Italy</td>
</tr>
</table>
I´m using contact form 7 (wordpress, contact form) as a order page
for products. But I´m interested in styling the HTML-Mail-template in the same 3-column style
as the picture. Is there any easy way to do that?
I think the two previous answers misunderstood the question. Johny is asking how he can edit the html email that gets sent out by contact form 7 either to himself or the person who completes the form.
To do this you need to select the option of "Use HTML content type" in order to use html in the email. This is on the "mail" section of CF7.
Then the easiest way to style the html email template is using a table.
First start with a blank html template with a XHTML doctype:
StackOverflow Email Template
Then you can add any html and information you need to, to get it looking the way you want it:
For instance it is probably easier to start with no margin or padding so you add some style to the body tag:
<body style="margin: 0; padding: 0;">
Then you need to add all your style inline in the table as there are no style sheets sent with your email. You could also create an inline style section in the section as with normal html.
so I would do this for your example:
<table align="center" border="0" cellpadding="2" cellspacing="0" width="100%" bgcolor="#ffffff" style="border-collapse: collapse; font-family: Arial,sans-serif; font-size:1em;" >
Once that is all set you need to add the cells to your table.
As an example your first and second row could be something like this:
<tbody>
<tr>
<td colspan="6">To: [your-name]</td>
</tr>
<tr>
<td>Falt Utan Flask:</td>
<td>[Input-One] Back</td>
<td>Falt Utan Flask:</td>
<td>[Input-Two] Back</td>
<td>Set Datum:</td>
<td>[Date-324]</td>
</tr>
</tbody>
Each will be a new row, and each section will be a new cell. Then just keep populating and building out your table to display the way you want it.
You can add inline style into the or elements as you need it or you can add the inline style in the area as mentioned before.
This is what i needed to do for a website using the contact form 7 plugin. I found these to tutorials very helpful.
Tut 1
Tut 2
Hopefully I have not misunderstood the question myself, it is a bit ambiguous, but it was the closest one I found to what I was looking for.
Yes you can do it, you need to add some css to your existing theme file, as plugin files modification is not recommended, as i can see you have use the text boxes, you can do something like this
css style
.wpcf7-text { width:150px !important; }
.wpcf7-text is the text box class in contact form 7
in form settings
your name- [text- text-20] your addres- [text- text-30]
There are two ways
(1) Over-riding CSS of Contact Form-7 itself. This can be done through .wpcf7-[inner class] then your CSS code.
[The Easy Way]
(2) You can use this plugin https://wordpress.org/plugins/contact-form-7-style/ to style contact form-7. It has variety of options. It is not perfect though but surely a solution.
Hope this helps!
My site is in VB using VS 2010, and my z-index property I have set to 20, and it's working fine over pictures and other things. But I have two youtube videos, and the z-index property isn't working; the menu I want to display is covered up by the youtube video -- but only in IE; other browsers work fine!
Am I doing something wrong? Or is there something I should do differently when it's a youtube video?
My embedded video looks like this and it's covering my menu:
<table class="tablestyle0">
<tr>
<td>
<iframe id="ShowFrameID" width="640" height="480"
src="http://www.youtube.com/embed/IxiZ0sdh6hw?wmode=opaque?
modestbranding=1&rel=0">
</iframe>
</td>
</tr>
Any help or guidance in this regard would be truly appreciated!
If you change wmode=opaque to wmode=transparent, then the YouTube player should respect your z-index ordering.
EDIT: The problem is you have two ? characters in your YouTube URL. The wmode=opaque part is not getting through to the server.
It worked for me after I made that change. You probably don't have to set it to transparent (opaque should work, too).
<table class="tablestyle0">
<tr>
<td>
<iframe id="ShowFrameID" width="640" height="480"
src="http://www.youtube.com/embed/IxiZ0sdh6hw?wmode=opaque&modestbranding=1&rel=0">
</iframe>
</td>
</tr>
Add position:relative to your table class' CSS and it should honor the z-index after that.
n.b. This concerns HTML-email coding (limitations apply)
For example in the Mail Chimp email template I'm working with there is this:
<td valign="middle" width="140" style="vertical-align:middle; text-align: left;">
I guess they're covering bases but when should one use valign="top" and when do I use style="vertical-align: top;" (and when use both)?
What's the history that leads to this confusing state of style assignment?
valign is deprecated and should not be used in newer applications, as its support is not guaranteed to be there in future versions of current browsers. vertical-align is the recommended CSS way of vertically aligning content.
See this link for details: http://phrogz.net/css/vertical-align/index.html
Since valign is deprecated, some email clients might not render it. So, there's the inline CSS fallback (since HTML emails require inline CSS).
I think the main reason why it is used in this case is so that no matter what, the <td> is being vertically aligned in the middle.