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?
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.
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.
[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?)
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…)
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. :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.