In python, I have a piece of code, something similar to this.
def send_email_report():
message = {Some HTML Syntax with inline styles for building a form}
my_email = MIMEText(message, "html")
my_email["From"] = "XXXX#domain.com"
my_email["To"] = "YYYY#domain.com"
my_email["Subject"] = "Topic : Report Generation"
sender = "xxxx#domain.com"
receivers = ["yyyy#domain.com"]
with SMTP("localhost") as smtp:
smtp.login(sender, "Email-Password")
smtp.sendmail(sender, receivers, my_email.as_string())
I am able to receive the smtp-email in outlook. The formatting looks great, as all the < img > tags are generated perfectly and spacing is awesome.
But when I try to forward the email to another person, the alignments get messed up. Since html tag is built inside the message, only inline CSS is applied.
A few properties such as font color are retained, while majority of the properties like float:right, width of the whole container are not considered. At first, I thought it was because I have mentioned attributes such as width in px so I changed from px to % and rem, and added ! important as well, but of no use.
I also have an idea of converting the entire html assigned in message variable to a image and email that(since forwarding an html form as an image will not affect the styling), but I am not sure if it is feasible.
And also I don't want it as an attachment, I can have an html form or the image of the html form in email body. That's fine.
Any suggestions on how to maintain the style property while forwarding the generated email?
Any Help is appreciated, Thanks in advance.
Related
I'm making an email template to be used with AWS. In the body text of the email we add a {username} variable which gets replaced by the user's actual username. In our case the username will be an email address and when Amazon works their magic it gets replaced with a mailto: link
e.g:
<p>{username}</p>
will become
<p>example#domain.com</p>
I want to be able to change the style of the link, but don't have access to the format of the <a> tag itself. Also because email clients don't widely recognise style tags I can't use CSS so all solutions must be inline.
I've tried:
<p style="color: #fff !important">example#domain.com</p>
and that has no effect.
Any ideas very welcome!
Fiddle for the sake of testing.
In most of my emails, the image included may not be present. In such cases the broken image icon is displayed along with my alt text.
Problem Explanation:
While sending an HTML email along with an <img> tag, at cases this image may not be there (404). As the image URL is dynamic, I cannot verify the existence of the image before sending the email. So it displays a broken image icon. I want to get rid of this icon.
JSFiddle
Code Snippet:
<img alt="NA" src="http://www.somerandomdomain.com/error.png" width="120" >
I am need of a solution compatible with all major email clients.
Have tried onerror handler, but it does not work in email clients.
Also have tried text-indent: -9999px;, it works in Outlook but not
in Gmail.
When the negative indent is changed to positive Outlook
scrolls to the right which is a mess.
The solutions mentioned in possible duplicate, are for the web. But my question is clearly about the HTML emails, where JS and objects does not work like the solutions provided.
When generating email, check if that image exists (Example in PHP):
$url = 'http://www.somerandomdomain.com/error.png';
$headers = #get_headers($url);
if (strpos($headers[0],'200') !== false) {
echo "<img alt='NA' src='{$url}' width='120'/>";
}
I know it is recommended not to use image maps in emails, but that aside, how can I (or can I) create an image with a usemap tag in Outlook using VBS?
My current piece of code for inserting the logo and link is:
'insert campaign banner
Set objLink = objSelection.Hyperlinks.Add(objSelection.InlineShapes.AddPicture(strCampaignBannerLoc), strCampaignURL,,,"")
This month's campaign image is a rectangle showing three events, I want a link for each event and I would like to avoid three images.
Many thanks!
The Outlook object model provides three main ways for working with item bodies:
Body - a raw text.
HTMLBody - an HTML markup which represents the body.
The Word editor. The WordEditor property of the Inspector class returns an instance of the Document class which represents the message body. So, you can use the Word object model to custimize the body.
You can read more about all of these way in the Chapter 17: Working with Item Bodies article in MSDN.
I've build a page with a form and for some reason my button for the form and my footer element is not showing up on the page.
I have added a link so you can check out my code. And I know its a HOT MESS! so if you can give me any tips on the css and html please feel free to let me know.
http://jsfiddle.net/jeramiewinchell/j6n0w1tj/
enter code here
Fair point in the edit. I said it was a mess without giving anything positive.
Here are some tips that could improve the HTML (with links for reference):
You should specify a doctype (e.g.: <!doctype html>) instead of having an empty <!DOCTYPE> tag.
http://www.w3.org/TR/html-markup/syntax.html#doctype-syntax
It would be nice to have a <html> wrapping everything, and a <head> wrapping the title and links. I'm not clear if it's technically valid not to have them (the W3C HTML validator will not validate a page without a <head> although it will validate without the <html>), but it's nice and it will help keep things organized.
The links should have a type indicating the mime type (in this case type="text/css").
http://www.w3schools.com/tags/tag_link.asp
Closing empty elements (e.g.: img, link, input) is not mandatory in HTML5, but it is in XHTML. Depending on the doctype that you choose, you should close them accordingly. Using /> at the end is valid for both HTML5 and XHTML, so you may want to consider it.
http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/
Don't nest <p> tags. Paragraphs are block elements that should contain only phrasing content (= not block/paragraph elements). How to fix it: replace <p class="site_section1"> with a <div class="site_section1">.
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
Always close the block tags that you open. For example, you never close the <p class="site_section1"> (altough as I said in the previous point, you should making it a <div>... and then close it). The result in the browser may be unpredictable.
I mentioned in my comment above (sorry, I don't know the name in English), you should avoid crossed tags/nesting of tags. This is incorrect: <label>...<select></label>...</select>, it should be <label>...</label><select>...</select>.
Again, not mandatory but it could be nice to set a value attribute in the <option> tags. If you don't specify a value, the value sent will be the content inside between the <option> tags (that may be what you want in this case).
Don't forget all the code and to close the tags correctly! Things like this: <button type="submit">Save</buttons </div> can have disastrous results (although it looks more of a typo to me).
Don't close tags twice (e.g.: you have </body> twice)
And for the CSS (also with some links for reference):
Avoid unnecessary styling. E.g.: border-radius:0px is unnecessary because 0 is the default value for border-radius (unless you have defined some previous style and you want to overwrite it).
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Specifying units is required for values different than 0. E.g.: margin-left:15 is that 15 in px or em?
http://www.w3.org/TR/CSS21/syndata.html#length-units
The units are optional when the value is 0. Some people find it more readable and better because it is shorter; I personally like them. Your call, but always:
Be consistent: if you omit the units for a zero value, do it in all your definitions. It looks awkward to me to see a padding:0 (without units) next to a margin:0px. It will help you read and maintain the code later.
You could merge many styles together. For example: .zonelist23, .zonelist24, and .zonelist25 are the same, you could define one style only (e.g.: .zonelist_bml30) or set all of them together: .zonelist23, .zonelist24, .zonelist25 { ... }
Not mandatory, but nice: The font-family tag should have several names as a "fallback" system. That way, if the browser does not support the first font, it will go to the next and so on.
http://www.w3schools.com/css/css_font.asp
Just out of curiosity: did you meant to put in the stylesheet .header or is it header? I personally try to avoid classes/ids with the same name as a tag to keep the code easier to understand, but that's a personal choice. As far as I know there's nothing against naming a class like a tag.
One way of having fun and learning (you may now think that I have a strange way of having fun and learning):
Go to the W3C HTML Validator.
Click on the the "validate by direct input" tab.
Copy your code in the box.
Click on the "Validate" button.
View the first error, and read the comments (visit the links for reference).
Fix the code according to what you've read.
Click on the "Revalidate" button.
Repeat steps 5-7 until no errors are found.
(You can do the same with the CSS in the W3C CSS Validator)
Please see this fiddle : http://jsfiddle.net/j6n0w1tj/1/
I have corrected your code.
Kindly follow the steps mentioned by #monty82, who has given an excellent explanation on how to proceed with your code.
Wrong html:
<label>..<select></Label><option></option></select>
Correct html
<label>..</label><select><option></option></select>
Tags like <input>,<br> are self closing tags,close it like <input
type="radio"/> and <br/> not as </br>.
Please make sure whether your opening and closing tags match
So I have this textarea in my website. By default, it has something like this as its contents:
Name : Sample Value
Age : Sample Value
Location : Sample Value
It is editable before the user hits the button and inserts it into the database, although I am not using a rich text editor since it's nothing but a simple text.
Since basic HTML codes are not browser readable inside the textarea tag, I used
to separate lines.
Now my problem is that I am not able to include the HTML code when I'm reading the value of the textarea tag in the server side.
Thus, the value inserted to the database is not HTML formatted as well, and when it is once again fetched into a web browser, it has no format at all.
What alternatives do I have? Thanks.
Not possible using textarea, use contenteditable DIV instead.
<div contenteditable="true"></div>
You can use getters and setter as shown below:
//Get content
var contents = document.getElementById("divId").innerHTML;
//Set content
document.getElementById("divId").innerHTML = contents
Here is the browser support for this approach.
Why don't you use JQuery and do this $(textarea).val() to get the value of the textarea as a string and use it server side. you might have to consider using Ajax to make a call to the server side method you want to pass the Html data.
The answer is very simple.
Use contenteditable DIVs instead of TextBox and TextArea.
But remember to add contenteditable="false" to all your inner HTML tags.
This worked for me.