SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    the wonderful world of HTML emails...;-)

    hi,

    am coding an HTML email and am having problem illustrated here,
    Hotmail Image Problems in HTML Emails | Viget Inspire

    style="display:block;" of course solves the problem.. however, HTML emails are also supposed to work with CSS turned off, right? I've been told some email clients disable CSS.. so how do you solve this problem without CSS?

    I put <font size="0" in all td's containing imgs (and also gave td's exact same height as images...) but problem persists when I turn off CSS.. is there a solution?

    thank you..

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Location
    Sydney, Australia
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi maya90, it's fine to use CSS in HTML email, I wouldn't stress too much. Check out this guide to CSS support in email clients and you'll see what I mean. A range of properties aren't supported, however the trick is to design with this in mind and focus on graceful degradation, over wiping out CSS use altogether. Don't forget to test, too

    For email clients that don't support HTML, provide a solid text-version of your email. If your email software supports multi-part messaging, this should be a snap to do.

    Cheers, maya! Give me a yell if you have any questions about this.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I'm wondering why you are slicing up the image anyway, as it seems like you are asking for trouble unnecessarily (though, of course, I don't know the context).

    Most email clients seems to be happy with inline CSS, as far as I'm aware (thought take note of what rules they'll recognize from Ros's link above).

    Images, being inline by nature, align themselves to the baseline of any text that does or even might sit beside them, hence the need for vertical-align: bottom to get rid of a bottom gap in many situations. You will rarely, if ever, see a web page (which includes emails in Gmail etc.) without some styles applying, as browsers have their own style sheets that will apply if you don't intervene with your own styles. Using display: block obviously is another way to cancel the inline behavior of images.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You can use this old fashioned method as well as a back up which seems to work.

    Code:
    <img align="top" src="....etc....
    That usually kills the gap also.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=ralph.m;4869741]I'm wondering why you are slicing up the image anyway, as it seems like you are asking for trouble unnecessarily (though, of course, I don't know the context).

    thank you for your response.. everyone says that all email clients support CSS, but at work they always make you make them work w/o CSS (fallback font tags, no bg-imgs, etc..) oh well..

    the reason I'm slicing this particular segment is that it's an image of about 500 x 80, with a link button right in the middle of it, that's about 180px wide.. and since you can't do background-imgs in emails I don't have a choice, have to slice and dice.. all solutions to my problem are CSS... I guess I'll have to live with the gaps at bottom of imgs for clients that don't support CSS (ARE there really email clients that strip all CSS (I mean inline, all CSS is inline of course) from HTML emails?)

    thank you...

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can use this old fashioned method as well as a back up which seems to work.

    Code:
    <img align="top" src="....etc....
    That usually kills the gap also.
    that didn't work.. either align="top" or align="bottom" oh well... thank you for your help..

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    actually, here's my code, in case anybody's curious..

    Code:
    <table cellpadding="0" cellspacing="0" border="0" width="598" height="179">
    	<tr>
    		<td colspan="3" height="86">
    			<font size="0"><img src="http://www.sitepoint.com/forums/images/welcome.jpg" width="598" height="86" alt="welcome" style="display:block;" border="0" align="top"></font>
    		</td>
    	</tr>
    	
    	<tr>
    		<td width="205" height="43">
    			<font size="0"><img src="http://www.sitepoint.com/forums/images/welcome_left.jpg" width="205" alt="welcome" style="display:block;" border="0"></font>
    		</td>
    		<td width="188"><font size="0">
    			<a href="" title="">
    				<img src="http://www.sitepoint.com/forums/images/btn_thank_you.jpg" width="188" height="43" alt="thank you for registering" style="display:block;" border="0">
    			</a></font>
    		</td>
    		<td width="205">
    			<font size="0"><img src="http://www.sitepoint.com/forums/images/welcome_right.jpg" width="205" height="43" alt="welcome" style="display:block;" border="0"></font>
    		</td>
    	</tr>														
    	
    	<tr>
    		<td colspan="3" height="50">
    			<font size="0"><img src="http://www.sitepoint.com/forums/images/welcome_btm.jpg" width="598" height="50" alt="welcome" style="display:block;" border="0"></font>
    		</td>
    	</tr>	
    </table>
    thank you..

    EDIT: why did this thing add "http://www.sitepoint.com/forums/" to img-paths? that's odd.. (I know paths to imgs in emails have to be absolute, that will be done later..)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    everyone says that all email clients support CSS, but at work they always make you make them work w/o CSS (fallback font tags, no bg-imgs, etc..) oh well..
    Supporting CSS (in some fashion) is one thing; but supporting it well is another. Basically, standards-based web design, with CSS layouts etc., is just not feasible with emails yet—sad as that is. (And there are some companies pushing the clock backwards, too. )

    the reason I'm slicing this particular segment is that it's an image of about 500 x 80, with a link button right in the middle of it
    If I were you, I'd just plop in the "button" as part of one large image (with an alt attribute, of course), wrap it in a link and be done with it. That's more practical anyway.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Remove the white space gaps in the html also.
    e.g.

    Code:
    <td colspan="3" height="86"><font size="0"><img src="http://www.sitepoint.com/forums/images/welcome.jpg" width="598" height="86" alt="welcome" style="display:block;" border="0" align="top"></font></td>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •