Comments on: How To Use CSS in HTML Emails http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/ Derek Gulbranson\'s Weblog Thu, 11 Mar 2010 06:07:28 +0000 http://wordpress.org/?v=2.7.1 hourly 1 By: qwan http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-86017 qwan Mon, 20 Jul 2009 10:25:44 +0000 http://derekgulbranson.com/?p=59#comment-86017 A good article but it never helped me. How do you put a background image when google and hotmail strips the background image attributes from your inline css? Also it strips out the position:absolute. I used this to workaround the background issue. used a container div without any position attirbute but set it to the width and hieght of the background image. Then I put in a div at the end of the all the divs which contained the background image.(as an image not a background) and postioned it absolutely at top 0 and left 0. I set the z-index to -100. This is turning into a big story. Lets cut it short. I put in the heading with a margin 200. But that started giving weird problems. I did not give any postion attribute and the it did not work(obviously). All I am trying to say that there is not way to make a mailer that has a background image with divs. I had to use old school tables and slick up the image. There was a gradient under the text I had to change it to solid color. So that I could add text(otherwise it would not be html just an image, not wonder we some proffessional companies just send you 1 image as the mailer and use imagemaps to define the links.) I can send you the mailer if you want, I maybe be doing something wrong too. But I tried everything I knew. 3 days spent the last one spent on tables(nested tables to prevent them from breaking) BTW hotmail ever strips the border colour tags from inline css. A good article but it never helped me.
How do you put a background image when google and hotmail strips the background image attributes from your inline css?
Also it strips out the position:absolute.
I used this to workaround the background issue.
used a container div without any position attirbute but set it to the width and hieght of the background image. Then I put in a div at the end of the all the divs which contained the background image.(as an image not a background) and postioned it absolutely at top 0 and left 0. I set the z-index to -100.
This is turning into a big story.
Lets cut it short. I put in the heading with a margin 200. But that started giving weird problems. I did not give any postion attribute and the it did not work(obviously).
All I am trying to say that there is not way to make a mailer that has a background image with divs.
I had to use old school tables and slick up the image.
There was a gradient under the text I had to change it to solid color. So that I could add text(otherwise it would not be html just an image, not wonder we some proffessional companies just send you 1 image as the mailer and use imagemaps to define the links.)
I can send you the mailer if you want, I maybe be doing something wrong too.
But I tried everything I knew. 3 days spent the last one spent on tables(nested tables to prevent them from breaking)
BTW hotmail ever strips the border colour tags from inline css.

]]> By: Dimitri http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-50657 Dimitri Thu, 29 May 2008 09:18:08 +0000 http://derekgulbranson.com/?p=59#comment-50657 I can't do that, I am working for a company as a webdesigner, and the signature image is not always the same... after some time we change our signature picture (depending on new marketing actions) I can’t do that, I am working for a company as a webdesigner, and the signature image is not always the same… after some time we change our signature picture (depending on new marketing actions)

]]> By: derek http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-50571 derek Wed, 28 May 2008 19:34:02 +0000 http://derekgulbranson.com/?p=59#comment-50571 Make sure you have an explicit width and height on your image element. Don't let it auto. Make sure you have an explicit width and height on your image element. Don’t let it auto.

]]> By: Dimitri http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-50533 Dimitri Wed, 28 May 2008 13:19:17 +0000 http://derekgulbranson.com/?p=59#comment-50533 After 100 good emails (file - new) with an image in the signature... I always have one bad signature email... File New => and then I can see the image being reduced to 10px * 10px anyone? By The Way: After a reboot everything is back normal... for 99 times :-) After 100 good emails (file - new) with an image in the signature… I always have one bad signature email…

File
New
=>
and then I can see the image being reduced to 10px * 10px

anyone?

By The Way: After a reboot everything is back normal… for 99 times :-)

]]> By: derek http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-2259 derek Wed, 22 Nov 2006 20:15:02 +0000 http://derekgulbranson.com/?p=59#comment-2259 Use inline CSS. Only a very limited number of inline CSS works in Gmail, font colors and sizes mostly. Use inline CSS. Only a very limited number of inline CSS works in Gmail, font colors and sizes mostly.

]]> By: Houston berry http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-2256 Houston berry Wed, 22 Nov 2006 18:22:54 +0000 http://derekgulbranson.com/?p=59#comment-2256 How do you get CSS to work in Google mail? How do you get CSS to work in Google mail?

]]> By: anonymous email http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-919 anonymous email Wed, 09 Aug 2006 05:54:36 +0000 http://derekgulbranson.com/?p=59#comment-919 Unfortunatelly CSS in HTML emails are used to set tracking bugs. Thats why Google Mail cuts off all dirty stuff from it. Unfortunatelly CSS in HTML emails are used to set tracking bugs. Thats why Google Mail cuts off all dirty stuff from it.

]]> By: damon http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-93 damon Wed, 16 Nov 2005 02:26:24 +0000 http://derekgulbranson.com/?p=59#comment-93 If you're worried about your images not showing up in your html email, you should embed them as inline attachments with Content-IDs and reference them in the >img< tags with the cid: syntax. With all the privacy scares and security threats, more clients are showing up with external images blocked anyway, so the privilage of using image GETs to track your users is going to disappear soon. That being said, The remaining priority would be (like you said) to make sure that the presentation of the message doesn't suffer. Embedding all related content is the only proper way to do that. Although tables are deprecated as far as the cutting edge coder is concerned, they are far from being dropped by the browser developers or the W3C for that matter. Some of us still remember the days when the font tag wasn't even supported by all browsers... ok.. i'm going to stop now.. i'm starting to show my age. lol If you’re worried about your images not showing up in your html email, you should embed them as inline attachments with Content-IDs and reference them in the >img< tags with the cid: syntax.

With all the privacy scares and security threats, more clients are showing up with external images blocked anyway, so the privilage of using image GETs to track your users is going to disappear soon. That being said, The remaining priority would be (like you said) to make sure that the presentation of the message doesn’t suffer. Embedding all related content is the only proper way to do that.

Although tables are deprecated as far as the cutting edge coder is concerned, they are far from being dropped by the browser developers or the W3C for that matter.

Some of us still remember the days when the font tag wasn’t even supported by all browsers… ok.. i’m going to stop now.. i’m starting to show my age. lol

]]> By: derek http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-77 derek Tue, 13 Sep 2005 18:56:24 +0000 http://derekgulbranson.com/?p=59#comment-77 Adrian, have you tried using the nosend="1" attribute on the img tag? Although it's undocumented, I believe the purpose of that attribute is to prevent what's happening to your images. Aside from that, I think it would be more stable to use absolute URLs. Whenever I have to include images in an email, I always upload the images to a web server and use the absolute URL to the image on the server. This also precludes the need to include "attachments" with each outgoing email. Absolute URLs combined with the nosend attribute should make the images pretty stable. I'm assuming you are comfortable with editing the HTML of your signature. And just FYI, the HMTL for your signature can be found at C:/Documents & Settings/*your user id*/Application Data/Microsoft/Signatures. Adrian, have you tried using the nosend=”1″ attribute on the img tag? Although it’s undocumented, I believe the purpose of that attribute is to prevent what’s happening to your images. Aside from that, I think it would be more stable to use absolute URLs. Whenever I have to include images in an email, I always upload the images to a web server and use the absolute URL to the image on the server. This also precludes the need to include “attachments” with each outgoing email. Absolute URLs combined with the nosend attribute should make the images pretty stable.

I’m assuming you are comfortable with editing the HTML of your signature. And just FYI, the HMTL for your signature can be found at C:/Documents & Settings/*your user id*/Application Data/Microsoft/Signatures.

]]> By: Adrian D. http://derekgulbranson.com/2005/08/05/how-to-use-css-in-html-emails/comment-page-1/#comment-75 Adrian D. Tue, 13 Sep 2005 11:13:21 +0000 http://derekgulbranson.com/?p=59#comment-75 Sorry: so the consequences are that the images aren't displayed anymore. Sorry:

so the consequences are that the images aren’t displayed anymore.

]]>