HTML Email - Will an inline-coded CSS image float work?

Best guesses are welcome.
Many thanks for your counsel.

Oddly enough, when creating HTML emails, you WANT to use inline styled Tables or image maps instead of floats.
Mail Chimp and iContact have some excellent templates and tutorials to help you get started with HTML email campaigns.
http://www.mailchimp.com/resources/
http://www.icontact.com/home/index2
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Similar Messages

Air HTML/JS WinXP - Font specified in CSS doesn't work in App

I have an app that runs on several machines... on one of
them, however, the font has started failing to load in my app. The
App loads a web page and displays it. The font is installed locally
on the machine. I can use it in IE and Wordpad, but the App doesn't
see it.
The other machines have no problems with the app. The machine
has been upgraded to Air 1.5, but the App was built for 1.0. The
font is an OpenType font.
I have tried all manner of things to get the font to show up
properly: Changing the CSS, making sure the font works properly,
renaming and trying it. Removing the application's directory in
\Application Data\.
It looks like it's defaulting to Arial or some such font...
the system default. The system has a Volari XGI video card in it.
Could that be the problem? Is there a cache I need to clear?
Thanks in advance!

Hi zac,
excuse me, but I'm confused too. Is your question really for: "css doesn't work in live view or f12"? To me it seems you have, more probably, questions about your website. If yes, let's start slowly. The first thing that strikes me is this:
The reference to your banner-image must be one to "banner.jpg" file, not to a *.html.
Maybe I can be in touch with you a later again, you know, here's Christmas stress!Hans-G.
P.S.
If my assumption regarding the threads is true, then please open a new one.

HTML email - Any way to display BG images?

Older Outlook email clients are fine showing table background images hosted remotely,
but newer versions fail to display BG images.
Has anyone found a trick to do it?
Many thanks for looking.

Ooops, I spoke a little to soon. I was so excited to finally see the BG image show up, that I didn't even notice that the table data was not displaying. Argggh!
Where in your code would I add the data?
I have it in this little 3 by.3 table which I attempted to nest inside a cell of your code. Looked fine in a browser, but was invisible in newer Outlook messages.
Here is the data table
<TABLE>
        <TBODY>
        <TR>
          <TD height=25 colSpan=3></TD></TR>
        <TR>
        <TR>
          <TH height=10 width=200>
           <DIV align=right><I><FONT size=2>Range of Returns</FONT></I>
          </DIV></TH>
          <TH width=140>
            <DIV align=center><I><FONT size=2>September</FONT></I></DIV></TH>
          <TH width=190>
            <DIV align=center><I><FONT size=2>YTD</FONT></I></DIV></TH></TR>
        <TR>
          <TD height=10>
            <DIV align=right><FONT size=2>All PCM Accounts </FONT></DIV></TD>
          <TD>
            <DIV align=center><FONT size=2>1.0% - 8.0%</FONT></DIV></TD>
          <TD>
            <DIV align=center><FONT size=2>5.1% - 21.7%</FONT></DIV></TD></TR>
        <TR>
          <TD height=21>
            <DIV align=right><FONT size=2>S&P 500 </FONT></DIV></TD>
          <TD>
            <DIV align=center><FONT size=2>2.4%</FONT></DIV></TD>
          <TD>
            <DIV align=center><FONT size=2>14.6%</FONT></DIV></TD></TR>
        <TR>
          <TD height=75 colSpan=3></TD></TR></TBODY>
</TABLE>
Would love your assistance.

Image map in html email- color of text

I'm using some image maps in an html email newsletter and using the alt tag on some of the images to give a brief description as to what the newsletter content covers.
The issue I have is that the alt text is in the color blue. Can I control that and make it black? I've tried a few ideas but the text stubbornly remains blue........grrr!
Thanks
Os

RikRamsay14 wrote:
I think this is going to be one of those cases where I disagree with a large amount of your arguments. I find almost no valid reason for using a "slice and dice" method of email marketing and if the client is going to insist on that (or at least not accept the little extra time/cost in creating a template), it should be made very aware to them that the impact of the email will be severly diminished.
The hardest/most time consuming part of the template building (or HTML email building) is getting your first one that works consistently in all/most email clients. Once you have that one, its very easy and fast to change the layout, edit content etc. Add to that MailChimps resources on pre-designed HTML email templates and your good to go. http://mailchimp.com/resources/html-email-templates/
As for your examples above, they are not all done the same way.
http://www.screwfix.info/nl/jsp/m.jsp?c=4d2f0f00cbac503dfb is a relatively good example as the main focus of the email is in text - the top and the offer. The images are all products.
http://tre.emv3.com/HM?a=ENX7CloMai0H8SA9MOBj7h3nGHxKXLxSfPcStGb5lw8W0 bBhOG5mpqVsje_HheCmyF2x is a bad one as it's images all the way to the disclaimer.
You can see the differences by turning images off in your browser using the web deveoper toolbar.
I agree only IF you have a client that adheres to the template. I don't know many or any clients that adhere to anything personally. Its like when producing a magazine. Good ones adhere to a template design but they are generally produced by large companies with a good budget, a marketing department and a copywriter to make sure the content fit. My client are not in that league, they tend to write the copy themsleves and don't edit anything or give too much care or attention to following any layout. My job is to make what they supply fit. A template in that senario is going to be completley useless.
The first example above is probably 95% images....and you think that's a realatively good html email example?

Image not displaying in HTML email upload

Hi there,
I've uploaded a HTML email into E10 and linked all images as per the standard process however one is just not displaying. It appears when I look at it in Eloqua, and when I do a preview but when I send a test email it won't and just leaves a blank black box. I'm not sure how I need to remedy this, anyone else come across anything similar?
Thanks
Marika

Hi Marika,
From experience, in the majority of cases this happens when the Outlook HTML rendering engine isn't playing nice with your design. If you are using this client, have you checked the email on other clients or webmail (Gmail, Yahoo!, etc) to confirm? Support can usually help for emails created through the WYSIWIG editor, but custom HTML uploads would need to be reviewed by the person who authored the code. If you can pinpoint it to a particular email client, there are usually quite a few resources online that can provide guidance. Check outHTML Email Design Resources
The first thing I typically check out is whether the image is vertically and horizontally aligned with the elements near it, because Outlook has a tendency to put things into its own tables and slight misalignments can dramatically change the final code. If you're having recurring issues like this, investing in analysis tools like Litmus can be worth it.
Regards,
Bojan

HTML Email and Graphic Signatures

I'm sure this topic has been beaten to death, but has anyone read anything about any plans for RIM offering the options to send HTML messages and images in the signature? Thus far, I haven't come across much.

Welcome to the forums
In your email list, press menu/blackberry button, Options>Email Settings. Under there, for each email address, set "enable html email" to "yes" and set "download images automatically" to "Yes".
See how that works for you.
Cheers,
Kijana
Please remember to:
1. Mark Accept as Solution on the appropriate post once your issue has been resolved
2. Give Kudos to helpful posts (click the star next to the post)
Thanks

Html email and other email related problems

Hi, i recently ahd my 8330(vzw) replaced i ran the restore and everything works fine, except... I cannot get HTML email, and my "more" command gives " more request cannot be completed...etc" error. ive reactivated (*228) battery pulled, registered the phone, resent service books, im out of ideas. So i come to you guys for new ones. Thanks

Welcome to the forums
In your email list, press menu/blackberry button, Options>Email Settings. Under there, for each email address, set "enable html email" to "yes" and set "download images automatically" to "Yes".
See how that works for you.
Cheers,
Kijana
Please remember to:
1. Mark Accept as Solution on the appropriate post once your issue has been resolved
2. Give Kudos to helpful posts (click the star next to the post)
Thanks

Send HTML Email with Embedded Images and CSS

Hi All,
I have a html page. I want to send that html page(not with attachment) with all images and css. i search and try but I cant find a good solution. can any one help... plz..........
Thank You.....

If you want to send the html page and have it
reference the images and css files on your web
site, that's pretty easy. Just create a message
with text/html content that is your html page.
If you want to include all the images and css files
in your message along with the html page, you'll
need to create a multipart/related message and
you'll need to change all the html to reference the
images and css files using "cid:" references.

Html email white box no image

Dear all,
I have a sight problem with my html email, I have checked all the links etc and checked the html code but I cannot seem to have a live view of the html. I know this work absolutly fine on my other pc but at work it does not appear after resetting the links at work to the ftp site and local directory. I have even loaded the images directly to the ftp site and these cannot be seen on the copied url from filezilla, if someone could point me in the direction of tutorial or help in sorting this it would be greatly appreicative.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
           <title>Deal of the week</title>
           <style type="text/css">
                       @media only screen and (max-width: 600px) {
                           table.container { width: 443px !important; }
                                 td.advert img { display: none; }
                                 td.advert { background: #FFF url(images/advert-medium.jpg) no-repeat 10px 10px; height: 614px; }
                       @media only screen and (max-width: 510px) {
                                 table.container { width: 100% !important; }
                                 table.container td { border: none !important; }
                                 td.advert { background: #FFF url(images/advert-small.jpg) no-repeat center 10px; height: 416; }
                       </style>
      </head>
     <body>
      <div style="font-size: 1px; colour: #fff; display: none;">
         Place your preview message text here. This will show in most email clients as the preview text in the inbox.
       </div>
<table width="98%" border="0" cellspacing="0">
     <tr>
     <td>
          <table class="container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" class="advert" style="padding: 0px 0px 0px 0px: border-left: 1px solid #FFF; border-right: 1px solid #fff; border-top: 1px solid #fff:">
    <a href="images/advert-large.jpg"> <img src="images/advert-large.jpg" alt="Deal of the week" width="600" height="849" border="0" usemap="images/advert-large.jpg"></a>
        </table>
             </td>
         </tr>
         </table>
</body></html>

Hi John,
Thanks for the help, here is where I am at the moment.
ftp://www.coopercallas.co.uk/home/cooper2-ftp/images/joyou/Joyou%2017th.html
link cannot be found even though this is copied for ftp client
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Deal of the week</title>
           <style type="text/css">
                       @media only screen and (max-width: 600px) {
                           table.container { width: 443px !important; }
                                 td.advert img { display: none; }
                                 td.advert { background: #FFF url(http://www.coopercallas.co.uk/images/joyou/advert-medium.jpg) no-repeat 10px 10px; height: 614px; }
                       @media only screen and (max-width: 510px) {
                                 table.container { width: 100% !important; }
                                 table.container td { border: none !important; }
                                 td.advert {
          background: #FFF url(http://www.coopercallas.co.uk/images/joyou/advert-small.jpg) no-repeat center 10px;
          height: 849;
                       </style>
      </head>
     <body>
      <div style="font-size: 1px; colour: #fff; display: none;">
         Deal of the Week: Coopers have an exculsive deal just for you, we have 58% off Joyou Hot Water Tap.
     </div>
<table width="98%" border="0" cellspacing="0">
     <tr>
     <td> </td>
          <table class="container" width="600" height="849" align="center" border="0" cellpadding="0" cellspacing="0">
           <tr>
           <td valign="top" class="advert" style="padding: 0px 0px 0px 0px: border-left: 1px solid #FFF; border-right: 1px solid #FFF; border-top: 1px solid #FFF:">
           <a href="http://www.coopercallas.co.uk/images/joyou/advert-large.jpg" target="_blank"><img src="http://www.coopercallas.co.uk/images/joyou/advert-large.jpg" width="602" height="849"></a>
      </table>
       </td> </td>
         </tr>
</body></html>
even copying the jpeg url from the ftp client I cannot view it.
Cheers,
Wiinenot

UTL_SMTP send HTML email with embedded image?

Hi, I can use UTL_SMTP to send an HTML email ok, but does anyone have an example of how to include an inline embedded image in the email? Thanks!

If you want to send the html page and have it
reference the images and css files on your web
site, that's pretty easy. Just create a message
with text/html content that is your html page.
If you want to include all the images and css files
in your message along with the html page, you'll
need to create a multipart/related message and
you'll need to change all the html to reference the
images and css files using "cid:" references.

CSS Button Links in HTML email not working in TB

Greetings,
Our company is creating an html email for customers and we are noticing the CSS button links don't work when viewing in Thunderbird 31 and 32 beta.
Does TB require unique coding to get these to work?
Any assistance would be appreciated...
-- Paul

From the point of view of a user who views received email messages in Thunderbird, it doesn't support scripting. Straight links should work and and you can attach a link to an image.
Note that Thunderbird does NOT offer active links in the Compose window. So however you create it, you won't see it as the recipient does unless you save it and view it as a draft.

Html email - image won't load

You guys are wonderful - when I've worked and worked on a problem and get to the "pulling out my hair" stage, I remember how helpful the forum has been to me . . .
I have put Outlook 2007 on my computer now so I can easily test the quirks of email rendering in that email client.
I'm attempting to test using slices for the nav bar (hopefully a work around for "wonderful" Outlook 2007) but can't get past an image that won't load. I recently combined three images and some text into one image because Outlook was floating the images and spacing them wrong. The image that I'm referring to which now won't load is http://www.theshimogaproject.com/email/images/shimoga_pics_text.jpg
The original design displays correctly in browsers: http://www.theshimogaproject.com/email/riverrun-guests-email.html
Here's the code for the html email as it stands now:
<!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">
<title>Pinebrook Vacation Rentals - The Shimoga Project</title>
</head>
<body style="background-color: #FFFFCC; border-color: #333300; text-decoration: none; font-size: 30px; font-family: Verdana, Geneva, sans-serif; color: #663300; margin-top: 0;">
<table width="98%" border="0" cellpadding="0" cellspacing="0" id="Container">
<tr>
       <td><table width="580" align="center" cellpadding="0" cellspacing="0" id="View In Browser">
         <tr>
            <td align="center" style="text-decoration: none; color: #663300; font-size: 11px;"><p>Having difficulty reading this email? <a href="http://www.theshimogaproject.com/email/riverrun-guests-email.html" target="_blank" style="text-decoration: none; color: #663300; font-size: 11px; font-weight: bold;">View it in your browser</a></p></td>
        </tr>
        </table>
   </tr>
   <tr>
     <td><table width="580" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
    <td rowspan="3" style="text-align: left; font-size: 10px; "><img src="http://www.theshimogaproject.com/email/images/pinebrook-nav_01.jpg" alt="Pinebrook Vacation Rentals" width="229" height="139" align="top" /></td>
    <td colspan="4" ><img src="http://www.theshimgoproject.com/email/images/navArea_top_02.gif" width="351" height="95" align="top" /></td>
    </tr>
<tr>
    <td><a href="http://www.pinebrookvacationrentals.com/index.html" target="_blank" style="text-decoration: none; color: #FFFFCC; font-size: 10px; "><img src="http://www.theshimogaproject.com/email/images/home.gif" width="57" height="14" alt="Home" /></a></td>
    <td><a href="http://www.pinebrookvacationrentals.com/rentals.html" target="_blank" style="text-decoration: none; color: #FFFFCC; font-size: 10px;"><img src="http://www.theshimogaproject.com/email/images/vacation_rentals.gif" width="120" height="14" alt="Vacation Rentals" /></a></td>
    <td><a href="http://www.pinebrookvacationrentals.com/aboutus.html" target="_blank"style="text-decoration: none; color: #FFFFCC; font-size: 10px;"><img src="http://www.theshimogaproject.com/email/images/about_us.gif" width="78" height="14" alt="About Us" /></a></td>
    <td><a href="http://www.pinebrookvacationrentals.com/contacttemp.html" target="_blank"style="text-decoration: none; color: #FFFFCC; font-size: 10px;"><img src="http://www.theshimogaproject.com/email/images/contact_us.gif" width="78" height="14" alt="Contact Us" /></a></td>
    </tr>
<tr>
    <td colspan="4" align="top"><img src="http://www.theshimogaproject.com/email/images/navArea_bottom_09.gif" width="351" height="30" /></td>
    </tr>
</table>
<tr>
   <td><table width="580" id="River Run" align="center" >
         <tr>
            <td width="580" style="text-align: left; font-size: 10px; "><img src="http://www.theshimogaproject.com/email/images/rr_pic_text.jpg" alt="Thank You for choosing River Run at Wild Basin" width="580" height="146" /></td>
        </tr>
         <tr valign="top">
           <td bgcolor="#663300" style="padding-left: 15px; padding-right: 15px; padding-bottom: 10px; padding-top: 10px; color: #FFC; font-size: 12px; text-align: center;"><strong>Did you know that your Colorado Vacation is helping a child in need?</strong><br />
             <br />
A portion of every rental fee at River Run has been donated toward building a school for a group of impoverished children in a small, rural village in India. With your help, we have raised over $40,000 of the $103,000 needed to build this school.</td>
         </tr>
       </table>
</tr>
<tr>
    <td><table width="580" align="center" id="Shimoga" style="margin-top: 1px; text-align: left; font-size: 10px; ">
<tr>
    <td><img src="http://www.theshimogaproject.com/email/images/shimoga_pics_text.jpg" alt="The Village Of Shimoga" align="top" /></td>
</tr>
     </table>
</tr>
<tr>
       <td><table width="580" align="center" cellpadding="0" cellspacing="0" bgcolor="#663300" style="margin-top: 1px;" id="Shimoga Project Link">
         <tr>
            <td align="center" style="padding-bottom: 5px; padding-top: 5px; text-decoration: none; color: #FFC; font-size: 13px;"><p>To learn more about this project: <a href="http://www.theshimogaproject.com" target="_blank" style="text-decoration: none; color: #FFC; font-size: 13px; font-weight: bold;">---> Click Here</a></p></td>
        </tr>
        </table>
   </tr>
       <tr>
          <td><table width="580" border="0" align="center" cellpadding="0" cellspacing="0" id="Footer">
            <tr>
              <td align="center" style="padding: 8px; color: #663300; font-size: 11px; text-decoration: none;">
                <p style="display:inline; padding-right: 15px;">The Shimoga Project</p>
                <p style="display:inline;"> PO Box 193 </p>
                <p style="display:inline; padding-right: 15px;"> Allenspark CO 80510 </p>
                <p style="display:inline;">Phone: (303) 747-2594</p>
                <br />
                <p style="display:inline; padding-right: 20px;">Email:<a href="mailto:[email protected]?Subject=River Run Guest" target="_blank" style="text-decoration: none; color: #663300; font-size: 11px; font-weight: bold;"> [email protected]</a></p>
                <p style="display:inline;"> Web Site: <a href="http://www.theshimogaproject.com" target="_blank" style="text-decoration: none; color: #663300; font-size: 11px; font-weight: bold;"> www.theshimogaproject.com</a></p>    </td>
        </tr>
        </table>
    </tr>
</table>
</body>
</html>

Thank you for the validator links. I used them and cleaned up the
code. However it is still hanging up at the shimoga_pics_text.jpg
image. Any other ideas. The size of the image is 43KB. Would that
have anything to do with it?
Here's the code as it is now:
Having difficulty reading this email? View it in your browser
Did you know that your Colorado Vacation is helping a child in need?
A portion of every rental fee at River Run has been donated toward building a school for a group of impoverished children in a small, rural village in India. With your help, we have raised over $40,000 of the $103,000 needed to build this school.
To learn more about this project: ---> Click Here
The Shimoga Project
PO Box 193
Allenspark CO 80510
Phone: (303) 747-2594
Email: [email protected]
Web Site: www.theshimogaproject.com
Thanks for your help,
Sandy

BIS users in Pakistan::: HTML email view with images

Mobilink, service provider, has updated their BIS to 2.5 in July. But they are unable to provide HTML email view with images on Blackberry sets running on ver. 4.5.
Mobilink says that it is only available to BES users at the moment. BIS users will get it late on.
Please explain, is it a Mobilink issue or RIM? as all around the world BIS users are getiing it.

i dont beleive this. RIM wont leave out Mobilink, infact they cant. The upgrade was done on BIS servers across the board not for some service providers. You probably wanna try another device or may be re-install oS On device?
chk this thread: http://supportforums.blackberry.com/rim/board/message?board.id=BlackBerryInternetSolution&thread.id=...
Click on KUDOS to appreciate our efforts and mark the thread RESOLVED if your issue is resolved.

HTML Emails and background images in Dreamweaver

Hello. I created a HTML email in Dreamweaver. The original design came out of Indesign and had very specific background art. I removed all the text out of the Indesign and created a jpg. I took this jpg in Photoship and sliced and optimized it. I imported this HTML into Dreamweaver. Here I need to add in all the text (which is variable). I was originally thinking that you can only place background images with CSS. But I was told that you should not use CSS for HTML emails. So instead I left all the background art as normal images inside of a table. At this point I need to add text over these images. They only way I could figure out to do it was to add a div tag right over the image and type into there. This seemed to work fine but when I tested it in some emails all the div tags with text showed up under the table with images. This needed to display over. What is the best way to handle this issue? Thank you in advance.
Melanie

Sorry, but you cannot layer text over images in emails. Simplify your design or make an image with text on it in Photoshop. Use absolute URLs to images on your web server. And give people who can't see graphics and HTML pages in their email client a link to the HTML page on your web server.
How to Code HTML Emails
http://www.sitepoint.com/article/code-html-email-newsletters/
Chart showing how various email clients handle CSS.
http://www.campaignmonitor.com/css/
Download some HTML Email Templates from the links below to get started.
Mail Chimp
http://www.mailchimp.com/resources/html_email_templates/
Constant Contact
http://www.constantcontact.com/email-marketing/html-email-templates/index.jsp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Can you wrap an image with a link in an html email signature?

When I cite a remotely hosted image in an html signature, and try to make that image a link, the link is ignored and the just the image is shown.
e.g.:
<a href="https://www.facebook.com/pages/Ubiquia/146019678805381" target="_blank">
<img style=" position:absolute;
height:30px;
width:30px;
left:172px;
top:157.5px"
src="http://png.findicons.com/files/icons/2779/simple_icons/48/facebook_48_black.png" alt="ubiquia facebook" moz-do-not-send="true"
>
</a>

For each icon that you want to use in your email signature:
locate icon on internet webpage - right-click on the icon and select 'Save Image as'. Save the icon to your computer in a suitable file.
Then in Thunderbird
insert > Image
choose file - locate the saved icon on your computer
click on Link tab and enter the www etc webpage link info
click on OK to insert image with link.
Codewise, where you have the actual icon you would need something stating where the icon is located:
eg
<a href="https://www.facebook.com/pages/Ubiquia/146019678805381" target="_blank">
path to image saved on computer included in within <> </a>

HTML Email - Will an inline-coded CSS image float work?

Similar Messages

Maybe you are looking for