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

HTML & CSS
1

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

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 :slight_smile:

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

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

You can use this old fashioned method as well as a back up which seems to work.


<img [B]align="top"[/B] src="....etc....

That usually kills the gap also.

5

[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

that didn’t work… either align=“top” or align=“bottom” oh well… thank you for your help…

7

actually, here’s my code, in case anybody’s curious…

<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

Supporting CSS (in some fashion) is one thing; but supporting it well is another. :wink: 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. :mad: )

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

Remove the white space gaps in the html also.
e.g.


<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>