I am working on a simple (or so I thought) e-invite for a client. I sliced the image, checked it in DreamWeaver CS5 and all looks good when testing on Safari, IE, Chrome, Firefox browsers. HOWEVER, when I test the image in Outlook for mail out, it displays vertical space gaps within the image. The browser tests didn't show this flaw. Furthermore, if I continue to email the image out to myself, though it looks flawed on the initial send out, it looks good on Outlook but the other email carriers destroy the image into different pieces. Any insight on what I am going wrong is appreciated. I'm here to learn how I can avoid this issue in the future. My code is below (note: it was cleaned up by W3C, if you need the original code, I'll provide that, though both have the same issue) Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<title>Dearmin-Fogarty-Party-Electronic-Party-Invitation2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
img {display:block}
/*]]>*/
</style>
HTML is always quirky in Email clients. There's lots I would change about your code, but I think the simplest and safest approach would be to re-split the original image into full-width sections and use image maps to target the links.
HTML is always quirky in Email clients. There's lots I would change about your code, but I think the simplest and safest approach would be to re-split the original image into full-width sections and use image maps to target the links.
Thank you for your response. For learning purposes and to avoid future headaches, would you mind telling me what you would do differently. I honestly thought I had sliced the image into simple sections, but I guess not.
As I say, my best advice would be to scrap your current version. I didn't test your code in Outlook, so I don't know exactly where the problem lies. I'd start by changing your CSS to:
Code:
img { margin:0; }
There's no need to set your images to display:block that I can see. Email clients have limited support for CSS beyond the most basic properties, so the simpler you can make your code the better. And you may run into problems because your image files are so large. Try lowering the quality setting. You could even make the whole thing about 20% smaller if you used a slightly larger font on the "Boarding Pass'. Good luck!
As I say, my best advice would be to scrap your current version. I didn't test your code in Outlook, so I don't know exactly where the problem lies. I'd start by changing your CSS to:
Code:
img { margin:0; }
There's no need to set your images to display:block that I can see. Email clients have limited support for CSS beyond the most basic properties, so the simpler you can make your code the better. And you may run into problems because your image files are so large. Try lowering the quality setting. You could even make the whole thing about 20% smaller if you used a slightly larger font on the "Boarding Pass'. Good luck!
Thank you for the input. I scrapped the entire code as you recommended and went as far as to re-slice the image as large width sections. It isn't what I originally wanted, but since I am inexperienced, it is a bandaid for the moment. I then tried to use <div> in place of the tables and was able to find much better success in Outlook, Gmail, Yahoo, but NOT Hotmail as it continues to display image breaks. I'll live with it for now. Below is how I redid the code. What do you think?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="”text/css”">
img {
display:inline;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (ShipInvitationCard.psd) -->
<div style="width: 720px; margin: 0pt auto; overflow:hidden; font-size:0; line-height:0;">
<div><img style="display:inline" src="http://fenominaldesign.com/fd_images/ShipInvitationCard_01.jpg" width="702" height="323" border="0"></div>
<div><a href="mailto:bookkpr@dearminfogarty.com"><img style="display:inline" src="http://fenominaldesign.com/fd_images/ShipInvitationCard_02.jpg" width="702" height="46" border="0"></a></div>
<div><img style="display:inline" src="http://fenominaldesign.com/fd_images/ShipInvitationCard_03.jpg" width="702" height="111" border="0"></div>
<!-- End Save for Web Slices -->
</body>
</html>
Reply With Quote
Originally Posted by rtrethewey
Bookmarks