i am having a problem with the way hotmail and windows live is rendering part of my email newsletter. i have attached a link to the correct version and an image of the incorrect rendering in hotmail. i tried doing all different types of things to solve the proble but none of them helped. http://www.4culture.org/enews/index.htm
the problem is the wierd lined on the top and bottom of the left-hand column.
if there is a better forum for html email inquiries, please let me know.
html email problem in hotmail
Here's an old-school table based workaround. What's happening, is that the table ends up being just a little bit taller so what you're seeing is the background color of the table at the top and bottom.
Remove the BG color of the table, and instead apply it to each on of the table cells except for the top and botoom ones that contain the images with the rounded corners.
html email problem in hotmail
i tried that and got attached image. any ideas? the modified file is http://www.4culture.org/enews/index2.htm
The pain with email html documents is that you have to add so many properties to html tags.
I noticed that many of the %26lt;tr%26gt; and %26lt;td%26gt; tags do not have the color property. It would be easier to use the %26lt;tr%26gt; tags since there are far less. So, for each row of your table except for the first and last (where the images with the curved corners are contained) add a color attribute to your %26lt;tr%26gt; tag:
%26lt;tr bgcolor=''#4e587a''%26gt;
So you will change the following code for each of your rows in your table (except the first and last):
%26lt;tr%26gt;
?%26lt;td height=''55''%26gt;%26lt;img src=''index2_files/spacer.gif'' alt='''' width=''20'' height=''55''%26gt;%26lt;/td%26gt;
?%26lt;td style=''font-family: 'Adobe Garamond Pro',Garamond,'Times New Roman',Times,serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; font-size-adjust: none; font-stretch: normal; -x-system-font: none; color: rgb(255, 255, 255); line-height: 15px;'' width=''190''%26gt;%26lt;a style=''color: rgb(255, 255, 255); text-decoration: none;'' href=''http://blog.4culture.org/2009/09/revised-deadline-for-heritage-and-arts-sustaine d-support-program/''%26gt;revised deadline for heritage and arts sustained support program%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td%26gt; %26lt;/td%26gt;
%26lt;/tr%26gt;
... to this:
%26lt;tr bgcolor=''#4e587a''%26gt;
?%26lt;td height=''55''%26gt;%26lt;img src=''index2_files/spacer.gif'' alt='''' width=''20'' height=''55''%26gt;%26lt;/td%26gt;
?%26lt;td style=''font-family: 'Adobe Garamond Pro',Garamond,'Times New Roman',Times,serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; font-size-adjust: none; font-stretch: normal; -x-system-font: none; color: rgb(255, 255, 255); line-height: 15px;'' width=''190''%26gt;%26lt;a style=''color: rgb(255, 255, 255); text-decoration: none;'' href=''http://blog.4culture.org/2009/09/revised-deadline-for-heritage-and-arts-sustaine d-support-program/''%26gt;revised deadline for heritage and arts sustained support program%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td%26gt; %26lt;/td%26gt;
%26lt;/tr%26gt;
If this works for you, please give the credit to Lon. He gave you the correct answer.
Also, you did a great job on the design of the email document!
i actually tried that and it still didnt work (see link and image of problem in my second post http://www.4culture.org/enews/index2.htm) im wondering if it has something to do with the entire table height - even though i specify all the row heights, it is still making it taller than it should be.
anna
I looked at your source code and the table cells that are colored blue-gray have the bgcolor attribute. This is from your code:
%26lt;tr%26gt;
?%26lt;td height=''45'' bgcolor=''#4E587A''%26gt;%26lt;img src=''http://www.4culture.org/enews/2009/september/graphics/spacer.gif'' width=''20'' height=''45'' alt='''' /%26gt;%26lt;/td%26gt;
?%26lt;td width=''190'' bgcolor=''#4E587A'' style=''font: normal 15px 'Adobe Garamond Pro', Garamond, 'Times New Roman', Times, serif; color:#ffffff; line-height:15px;''%26gt;%26lt;a style=''color:#ffffff; text-decoration:none;'' href=''http://blog.4culture.org/2009/08/gallery4culture-sara-osebold-vaughn-bell/''%26gt;gall ery4culture: sara osebold %26amp;amp; vaughn bell%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td bgcolor=''#4E587A''%26gt;?lt;/td%26gt;
%26lt;/tr%26gt;
Notice the bolded text. Again, those bgcolor attributes are present in the cells that displayed as cells with a blue-gray background color.
The cells that are not colored have this code:
%26lt;tr%26gt;
?%26lt;td height=''30''%26gt;%26lt;img src=''http://www.4culture.org/enews/2009/september/graphics/spacer.gif'' width=''20'' height=''30'' alt='''' /%26gt;%26lt;/td%26gt;
?%26lt;td width=''190'' style=''font: normal 15px 'Adobe Garamond Pro', Garamond, 'Times New Roman', Times, serif; color:#ffffff; line-height:15px;''%26gt;%26lt;a style=''color:#ffffff; text-decoration:none;'' href=''http://blog.4culture.org/2009/08/public-art-rides-the-rails/''%26gt;public art rides the rails%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td%26gt;?lt;/td%26gt;
%26lt;/tr%26gt;
Notice the bgcolor attributes are missing in these cells--missing in the %26lt;td%26gt; tags.
My advice was to use the %26lt;tr%26gt; tags instead of the %26lt;td%26gt; tags simply because it was less work for you.
Are you saying that you inserted the bgcolor in every one of the %26lt;td%26gt; tags and it didn't work? I can't test it in hotmail, but it works in IE6.
i inserted the bg color in the td cells in the first couple of rows and the bottom row (i didn't do the middle rows because i thought i would just test out the problem areas first - which are the top and bottom). im still getting the weird funky thing on the top and bottom though - except instead of being blue its now white (because i took out the table background color). the image is above. it seems to work in all email clients (that i can test) except for hotmail/windows live.
Yeah, it's just expanding to fill the available space, cauing the gaps.?Try selecting the table and right above it click the little selector dropdown that shows the dimemsions and select ''Clear all heights''.
that still didnt fix the problem. i have spacers in each of the rows to specify the height but the rows themselves have no height. i have attached an image.
should i specify a height for the entire table?
I am nonplussed. We are dealing with email applications not web browsers, so the same rules do not apply. The biggest challenge you have is web-based email applications like gmail, yahoo, and hotmail. One of the rules when creating email campaigns is to keep it simple. Having too many tables might be a problem.
I wonder how difficult it would be to convert your table to a graphic and use that graphic instead of the table? That's what I would try.You could probably copy it from you web page.
Otherwise, you have offered an alternative to view the email in a web browser. A link to a web browser option is customary in email marketing because you are unlikely to get 100% cross-capatibility.
Nonplussed is a good way to put it.
Who knows why hotmail is displaying it different, it should be HTML email like any other, but perhaps the fonts are a bit different causing the tables to expand more.
Try this, one last idea from me:?One the two whitecolumns to the left and right of the content - merge the cells into a single column each.?Now there are two rows at the bottom that are lining up with the content on the right - those may actauuly be ''pulling down'' the entire table towards the bottom. Setting heights doesn't do much - they either go ignored or get overridden by other things.
Another thing that may not have been tried is to apply an css inline background style instead of the html bgcolor property. Instead of this:
%26lt;tr%26gt;
?%26lt;td bgcolor=''#4E587A''%26gt;%26lt;img src=''http://www.4culture.org/enews/2009/september/graphics/spacer.gif'' width=''20'' height=''45'' alt='''' /%26gt;%26lt;/td%26gt;
?%26lt;td width=''190'' bgcolor=''#4E587A'' style=''font: normal 15px 'Adobe Garamond Pro', Garamond, 'Times New Roman', Times, serif; color:#ffffff; line-height:15px;''%26gt;%26lt;a style=''color:#ffffff; text-decoration:none;'' href=''http://blog.4culture.org/2009/09/destination-maritime-town-of-dockton/''%26gt;destinat ion maritime: town of dockton%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td bgcolor=''#4E587A''%26gt; %26lt;/td%26gt;
%26lt;/tr%26gt;
... you might try this:
%26lt;tr%26gt;
?%26lt;td style=''background-color: #4e587a'';%26gt;%26lt;img src=''http://www.4culture.org/enews/2009/september/graphics/spacer.gif'' width=''20'' height=''45'' alt='''' /%26gt;%26lt;/td%26gt;
?%26lt;td width=''190'' style=''font: normal 15px 'Adobe Garamond Pro', Garamond, 'Times New Roman', Times, serif; background-color: #4e587a; color:#ffffff; line-height:15px;''%26gt;%26lt;a style=''color:#ffffff; text-decoration:none;'' href=''http://blog.4culture.org/2009/09/destination-maritime-town-of-dockton/''%26gt;destinat ion maritime: town of dockton%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td style=''background-color: #4e587a'';%26gt; %26lt;/td%26gt;
%26lt;/tr%26gt;
I also just thought about the suggestion I made using a graphic instead. That won't work because you need the links, so disregard that earlier suggestion about the graphic.
Thank you both for your help. This still did not fix the problem but I am just going to deal with how it looks in hotmail.