 Check source code for HTML email?, Trying to get HTML email to show up properly |
  |
| Blonderock8 |
 Aug 16 2011, 05:08 PM
Post
#1
|
|
Group: Members Posts: 3 Joined: 16-August 11 Member No.: 15,190  |
Hi, everyone,
I'm a graphic designer, I dabble in HTML, but am moderate at best in the language. I work with it a little, but don't understand every thing. Anyway, I am trying to figure out what is going wrong with the email blast I am trying to create for Constant Contact. My problem is with my code I think. Why is there a space in the e-blast I am creating? Can't see any problems with source code? I sliced the images in Photoshop and changed out the HTML with Photobucket hosted images. I have sliced the main poster image into 5 different sections. Three of the sections, I want to link to another web page. One is an image, one is to a Facebook page, and the other is to another web page. So, far I got it to do everything I wanted, but it shows up with spaces between the bottom images. (see attached photos) There isn't any <p> tags or anything noticeable in my code. Yet when I change out the images, space appears only at the bottom. Can anyone help me figure out why? I really need it to be seamless in the email. I am pasting this source code in Constant Contact. Also, a weird thing I noticed was that Dreamweaver liked the code as <img src first then <a href. But when I pasted in Constant Contact, nothing would show up. I changed the order to <a href then <img src, and then it magically worked. The line at the bottom didn't even show up in Constant Contact, but it shows up in Gmail and Yahoo. Not in AOL though. I know there is a lot of issues with mail server compatibility, but I just want it to show up seamlessly. Is there anything wrong with my code? Is there a better way I should be doing this to get the same result? Example of where I cut images:  The spaces that are showing up:  thanks! my code: <html> <head> <title>BOLO_2011_eblast_notice</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (BOLO_2011_eblast_notice.jpg) --> <table id="Table_01" width="700" height="1527" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"> <img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/TOP.png" width="700" height="951" alt=""></td> </tr> <tr> <td colspan="2"> <a href="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/BOLO_2011_poster_pdf.png" target="_blank"> <img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/LEFT_MIDDLE.png" width="334" height="464" alt=""></td> <td rowspan="2"> <img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/RIGHTBOTTOM.png" width="366" height="576" alt=""></td> </tr> <tr> <td> <img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/LEFTBOTTOM_PAYPAL.png" width="180" height="112" alt=""><a href="http://www.lakeoconeelivingmag.com/lolsubscribe.html" target="_blank"></td> <td> <img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/RIGHTBOTTOMFACEBOOK.png" width="154" height="112" alt=""><a href="http://www.facebook.com/pages/Lake-Oconee-Living/192945106908" target="_blank"></td> </tr> </table> <!-- End Save for Web Slices --> </body> </html> |
  |
 
|
| pandy |
Aug 16 2011, 06:59 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
You need to suppress the borders on linked images. They add to the width, so the table expands. Since this is an email, old style border="0" in the image tags is probably a good choice. Or if you want visible link borders just remove width and height from the table, it isn't needed anyway. A table isn't larger than its content - think rubber ribbon.
Your links are screwed up though. CODE <td colspan="2"> <a href="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/BOLO_2011_poster_pdf.png" target="_blank"> <img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/LEFT_MIDDLE.png" width="334" height="464" alt=""></td> You never close the A. The usual browser reaction to this is to link the rest of the page. Here CODE <td> <img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/LEFTBOTTOM_PAYPAL.png" width="180" height="112" alt=""><a href="http://www.lakeoconeelivingmag.com/lolsubscribe.html" target="_blank"></td> and here CODE <td> <img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/RIGHTBOTTOMFACEBOOK.png" width="154" height="112" alt=""><a href="http://www.facebook.com/pages/Lake-Oconee-Living/192945106908" target="_blank"></td> </tr> you put the start tag AFTER the image and the closing tag is till missing. The validator is helpful for things like this. You find the link to it at the top and bottom of every page here. You need to schmack a doctype on though for it to be able to do its work. http://htmlhelp.com/tools/validator/ With those corrections and the image link borders removed it worked for me, but note that there may still be problems with gaps when you slice an image and glue it back together with a table. They may or may not show up if you use a doctype that puts browsers in Standards Mode (didn't try). Then either remove the doctype again after validating or follow the advice here. http://htmlhelp.com/faq/html/images.html#image-nospace The link to Meyer's article is old. It's here now: http://developer.mozilla.org/en/docs/Image...Mysterious_Gaps . |
|
|
|
| Blonderock8 |
Aug 17 2011, 10:55 AM
Post
#3
|
|
Group: Members Posts: 3 Joined: 16-August 11 Member No.: 15,190 |
Thank you for your help, that was very informative. I didn't know what you were talking about at first (i'm a novice for HTML), but I re-read your post a few times and the links you sent, and I think I see what the problems are.
I tried using the approach from this link you gave, http://htmlhelp.com/faq/html/images.html#image-nospace by removing the spaces, but still no luck. The email shows up fine in AOL mail, but has spaces in GMAIL and YAHOO even after that fix and the link tag fix. The other link you sent suggests I try a few fixes to 'not' trigger 'Standards Mode' either with block-level elements or vertical alignment. Looks like vertical alignment might be the change I need to make them work, since I have several images in a table. Where would that tag go in the code though, and should I apply it to each image? td img {vertical-align: bottom;} |
|
|
|
| Blonderock8 |
Aug 17 2011, 11:35 AM
Post
#4
|
|
Group: Members Posts: 3 Joined: 16-August 11 Member No.: 15,190 |
yay!! I got it to work. Actually, what I ended up doing was just adding absolute bottom alignment to each image tag, and now it all looks okay in all of the tested email browsers, and the links work too.
I wouldn't have thought to try that without your help and links, and thanks also for the validation code link. It actually did let me copy and past source code without having to make a file doc type. Not sure if it's 100% correct, but I will work on that. It was interesting to see that this is a common problem and that certain browsers are working on a fix. thank you for all the info! Here's what my code ended up looking like: CODE <OpenTracking/> <!-- Do NOT delete previous line if you want to get statistics on the number of opened emails --> <CustomBlock name="letter.intro" title="Personalization"> <Greeting/> </CustomBlock> <html> <head> <title>BOLO_2011_eblast_notice</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (BOLO_2011_eblast_notice.jpg) --> <table id="Table_01" width="700" height="1527" old style border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"><a href="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/BOLO_2011_poster_pdf.png" target="_blank"><img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/TOP.png"align="absbottom"width="700"height="951"alt=""></a></td> </tr> <tr> <td colspan="2"><a href="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/BOLO_2011_poster_pdf.png" target="_blank"> <img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/LEFT_MIDDLE.png"align="absbottom"width="334"height="464"alt=""></a></td><td rowspan="2"><img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/RIGHTBOTTOM.png" align="absbottom"width="366" height="576"alt=""></td> </tr> <tr> <td><a href="http://www.lakeoconeelivingmag.com/lolsubscribe.html" target="_blank"><img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/LEFTBOTTOM_PAYPAL.png"align="absbottom"width="180"height="112"alt=""></a></td> <td><a href="http://www.facebook.com/pages/Lake-Oconee-Living/192945106908" target="_blank"><img src="http://i1045.photobucket.com/albums/b459/stefanieABL/LOL/RIGHTBOTTOMFACEBOOK.png"align="absbottom"width="154"height="112"alt=""></a></td> </tr> </table> <!-- End Save for Web Slices --> </body> </html> |
|
|
|
| pandy |
Aug 17 2011, 01:05 PM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
I still see the gaps.
Just removing the link border would have been enough. The less advanced CSS you use the better it is when it cames to email. Email clients aren't browsers and they don't support as much CSS as browsers do. Did you try border="0" in the IMG tags? You shouldn't include that I said it was old style either.  You have this in the TABLE tag.. <table id="Table_01" width="700" height="1527" old style border="0" cellpadding="0" cellspacing="0"> |
|
|
|
| nora234 |
Nov 17 2011, 04:04 PM
Post
#6
|
|
Group: Members Posts: 1 Joined: 17-November 11 Member No.: 15,883 |
I have the same problem with this code in constant contact, any clues?
<table id="textEdit" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td> <table id="Table_01" border="0" cellpadding="0" cellspacing="0" height="326" width="600"> <tbody> <tr> <td colspan="2"><a shape="rect" href="https://centerforarabicculture.wordpress.com/www.imhussein.com"> <img src="http://centerforarabicculture.files.wordpress.com/2011/11/photo2_01.jpg" border="0" height="162" width="332"></a></td> <td colspan="2"><a shape="rect" href="https://centerforarabicculture.wordpress.com/2011/11/17/1121-tufts-takht-2/"> <img src="http://centerforarabicculture.files.wordpress.com/2011/11/photo2_02.jpg" border="0" height="162" width="268"></a></td> </tr> <tr> <td><a shape="rect" href="https://centerforarabicculture.wordpress.com/2011/11/07/reception-and-introduction-of-arabic-year-at-the-kings-academy/"> <img src="http://centerforarabicculture.files.wordpress.com/2011/11/photo2_03.jpg" border="0" height="163" width="200"></a></td> <td colspan="2"><a shape="rect" href="http://www.centralsquaretheater.org/"> <img src="http://centerforarabicculture.files.wordpress.com/2011/11/photo2_04.jpg" border="0" height="163" width="200"></a></td> <td><a shape="rect" href="http://as.tufts.edu/music/musiccenter/default.aspx"> <img src="http://centerforarabicculture.files.wordpress.com/2011/11/photo2_05.jpg" border="0" height="163" width="200"></a></td> </tr> <tr> <td><img src="http://centerforarabicculture.files.wordpress.com/2011/11spacer.gif" height="1" width="200"></td> <td><img src="http://centerforarabicculture.files.wordpress.com/2011/11spacer.gif" height="1" width="132"></td> <td><img src="http://centerforarabicculture.files.wordpress.com/2011/11spacer.gif" height="1" width="68"></td> <td><img src="http://centerforarabicculture.files.wordpress.com/2011/11spacer.gif" height="1" width="200"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 09:55 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC