HTML - Email Blast Formatting
Hi All,
Is anyone out there familiar with formatting blast emails? We are having difficulty getting our email blast to display correctly across different email programs. Our HTML/CSS is semantically correct, validates, and looks great in a browser. However when sent via email it appears COMPLETELY different in Outlook, GMail, and Yahoo Mail (and probably others as well). The worst part is that each email program seems to interpret the HTML differently. Outlook is the worst, as it seems to pick and choose which elements to use (some items have background images, some do not, some <em> tags work, some do not, etc.) and Yahoo is the best, displaying a near perfect replication of the HTML page. So the question is - how do we ensure that our blast displays properly across email software? From my experience with web design I realize that it is nearly impossible to ensure that 100% of users will view the page exactly as you intend, but I feel like there has to be more that we can do to appease the majority. Similar TutorialsHi, I am working on an email where I'd like to customize the greeting so it will say, "Dear Joe" or whatever the receipients first name is. I grabbed this code from an email that did this via a template but when I drop it into my code, it doesn't work. <VAR id=LETTER.BLOCK4.greeting greeting="Greetings!" punctuation="," nametype="F" salutation="Dear"><B>Dear (Contact First Name),</B></VAR> I have tried assigning an id to the table that contains the greeting and then changing the id to match in the id attribute, but that doesn't work. When I view the souce from the successful template email, it only shows me the code from the body tag on down, so I cant see if there is script or something in the head tag that I need to insert into my code to make this work. If you haven't figured out already, my skills are pretty basic, so maybe this is something I just won't be able to do, but I wanted to see if anyone could help me. Thanks in advance! Liz Hi, I want to put in a form to get queries from the user, like so: Name: Email: Comments: 'Send' button and that it will send the information to my email address which is gmail? Thanks Hey there just starting to make a new site, and just kinda slowly making pages and trying to get the formatting and looks down first. anyways here is my site: http://uberwalla.com and you may notice depending on the resolution the footer is not at the very bottom its kinda floating high with a gray bottom under it. I am just wondering how i can make it so that no matter what resolution and no matter what browser, that it'll automatically make the footer the very bottom (touching the status bar or past it have to scroll down) no matter the size of the page. thanks in advance, uberwalla Hi everyone.. I;ve just launch my new webiste but IE seems to have messed up some of the formatting. Is there an eastyfix/tool to remedy this? All other browsers see fine. I have tested in Browsershots... Thanks Hello I am hopeless with html. I need to know how to be able to use the space to left (and maybe right) of the apartment ads on this page http://www.asia-expatsforum.com/phpB...apartments.php the ads are java script which I have centered on the page. its a php page but the space between the header and footer is html. whatever I try it either goes above or below the ads--i want to use the space to the left for other ads etc. do I have to create a table? or?? thanks Hi Team, I'm having problems formatting images in HTML. Here is my site: http://ledtvprices.org.uk/ I would like to "left align" the merchant logo buttons at the top so that they all sit evenly above the H1 Tag and start from the left to the right, rather than the middle of the page. I'd also like to left align all the tv images and space them all out evenly. How do I achieve this in HTML? Thanks. Sunil. I was wondering if anyone could help me. I have two DIVs. One is 43px high and 100% width. The second I want to be 100% high - 43 px. Is there a way to do this with CSS without resorting to Javascript? Many thanks. Hello, Here is the site I am having difficulty with. http://mysite.verizon.net/ekafrawy/Modern/index.html If you view this page in FF, the formatting is fine, but when you view it in IE, the spacing on the left nav bar is not right. Anyone have some tips on how to correct this? Thanks, Eric Greetings All, Some background: I'm as green as grass when it comes to html and website design, but that still did not stop me from buying a small website (business) from a desginer on ebay. It did well with some advertising, but recently I have had to change my payment processor because paypal froze my account for something that they have yet to explain to me (apparantly this is common with paypal) In any event, I managed to add the new payment processor to my website, but in the process of doing so, I did something to this page that made it larger and the pics are not in allignment any longer. There are gaps and it looks just plain ugly and unprofessional See for yourself: 1. The website as it should be: http://get-your-ride.com 2. The malfunctioning page: http://get-your-ride.com/join.html Can anyone walk me through on how to fix this? Is there a magic button to push? Or would you prefer I copy and paste the script for your expert eyes,since at this time html is more or less mumbo jumbo to me. Hi, I have an unusual problem. I am linking pages for my website, and I am sure that I have the formatting correct, but for some reason, when I reference my page (which is in a different directory) from a page within my root web folder, the formatting is gone. I am currently using simple html. My reference is as follows from my page within the root directory: <a href="/directory/directory/page.html">Text</a> The page works perfectly fine when it is in the root directory, but as soon as I move it to the other directory "/directory/directory" the background color and header formatting are gone. I still have my tables in place, but everything else is messed up. Ideas? Help? Hi Guys, Does any body know where in html you can change auto-formatting on or off Because previsouly i had turned it on and when i press ctrl + a then ctrl + X and then repaste the code HMTL would automatically format it.... This would be really handy if some one can tell me please... Thanks. Hi, I made a webpage using dreamweaver 8. When i preview the page in firefox it has not problems in design layout of the page but when i view it in IE it breaks the design format and is messed up. Can anyone guide me as to why it would do it and how i can fix it? Also, when i try to display some text in Chinese, it shows random characters. I changed the fonts in internet options to display Chinese but it didn't work. I have viewed Chinese websites and they i didn't have any problem in seeing the text. Any reason or suggestion as to why it would do this? I would really appreciate any help on this, Thanks, Alright since you all were so much help with my last question, here's another. if you look at my website ottersupport.com, you will see that the first page is using a template. I downloaded this and it is working/looks correct on this page but if you click the links for "Rates" and " terms" the templates styles are not on the left side like they are on the first page. I don't see any problems with the code, however I really don't know what I am doing. Thanks in advance, James --Come on is there seriously nobody that can answer this ? If I have this in the wrong area let me know or move it. I am a total newbie to this and so I have no idea what is going on. I downloaded a template from a wesite I forget which, but it looks great in IE, and Safari, however in Firefox, or Opera it is all screwed up. The site is www.ottersupport.com would somebody mind look at the code and let me know what i need to fix ? Thanks Hi there, HTML noob here trying to edit existing pages in our student information system. I've added a number of elements in the immunization row, however I can't seem to figure out how to line up the Compliant? and Exempt? rows with the above immunizatiion rows. Any suggestions would be much appreciated. Thanks, John hi all, this is my first post.. i just started learning html cause some friends asked if i could help build a website for our dancing group. Anyway, i read a bunch of stuff and decided i would use css and try to make a fluent design (you know, the concept where the page adapts to screen resolution and window size). So i used a lot of <div> with relative positioning and dimensioning (width, height and top, right etc all given as %) I also read about SSI and wanted to use one html file for all the decoration (logo, border, pics etc) and navigation and a different file for the content.. My testing server doesn't support ssi so i thought i could use <iframe> in the content file in order to call the dacoration/navigation page. All worked ok with html 4.01 transitional. Problem is (cause i use linux) i hadn't realized ie doesn't recognize position:fixed unless i use html 4.01 strict (originally i used transitional) So when i changed to strict, all browsers except google chrome screwed the appearance of the iframe with the decoration.. They seem not to recognize the height style when given as a %.. No matter what number i put, height doesn't change. If i use height a static height (given in px), all works ok, but that wouldn't adapt to window space and it won't look good (this is because decoration is based on a border, so it MUST fill the window) you can test it here users.forthnet.gr/ath/almechen/1 i have set home to use html 4.01 TRANSITIONAL so you can see what i want it to look like (works with chrome and firefox, not ie) Lessons is set to 4.01 STRICT with iframe having height:98% (this is where the problem is) (works in chrome, not ff and ie) Events is set to 4.01 STRICT with iframe having height:500px (this works but not how isn't what i really want) (works for all but not what i want) any ideas, any help? i would really appreciate Hello, First post here. I have a quick question regarding the default manner in which Firefox handles different <h> tags. In an html page if I have the following code... Code: Some Text <h3>Headlines!</h3> More Text In Internet Explorer it renders how I want it to like this... --------------------------------- Some Text HEADLINES! More Text --------------------------------- But in Firefox it throws in a hard return before and after the <h3> as such... --------------------------------- Some Text HEADLINES! More Text --------------------------------- I know I need to define an additional property in my h3 class but I am honestly not sure what that would be! Any help is appreciated. I'm trying to build a horizontal menu that has tabs. Basically it's a horizontal 5px line with the inactive links/tabs upside down hanging from the line, and the active page having the tab above the line. But I'm having a heck of a time getting the css to work on the one tab on top (contact link shown here). Anyone have any ideas how I can accomplish this? You can see my css attempt below. Thanks!! Code: #menu { width: 490px; height: 20px; padding-left: 300px; padding-top: 72px; border-bottom: 5px solid #b8ac85; } #menu.down { width: 490px; height: 20px; padding-left: 300px; padding-top: 92px; border-bottom: 5px solid #b8ac85; } #menu ul { list-style: none; } #menu li { display: inline; } #menu.up ul { list-style: none; padding-top:40px; } #menu.up li { display: inline; padding-top:-40px; } #menu a { float: left; width: 84px; height: 20px; display: block; text-align: center; text-decoration: none; color: #663300; font-weight: normal; font-size: 12px; text-transform: uppercase; padding-top: 5px; background: url(images/button_down.gif) no-repeat; } #menu a:hover { width: 84px; height: 20px; padding-top: 5px; color: #FFffff; text-decoration: underline; } #menu a.up:link { float: left; width: 84px; height: 20px; display: block; text-align: center; text-decoration: none; color: #663300; font-weight: normal; font-size: 12px; text-transform: uppercase; padding-top: 5px; background: url(images/button_up.gif) no-repeat; } #menu a.up:hover { width: 84px; height: 20px; padding-top: 5px; color: #FFffff; text-decoration: underline; } |