Hello all! Working on a HTML email for a client and am running into some problems that are making me crazy because I cannot figure out whats wrong. This is how the page looks currently: http://jennilynn.net/NewYearRes/NYresolution.html The section I'm having an issue with is at the bottom, the 'a new you for the new year' area. I have a #bottom div that holds the 2 divs #article and #links - simple enough right? I have the bg set to white but it doesn't extent all the way to the bottom of the div - and I have borders setup on the right and left sides and those aren't showing up either. Lastly, there is a weird space between the bottom of that div and the #footer div. Please help Thank you! <div id="bottom"> <div id="article"> ...article content... </div><!--/article--> <div id="links"> ...links content... </div><!--/links--> </div><!--/bottom--> <div id="clear"></div> <div id="footer"> ...footer stuff... </div><!--/footer--> Code (markup): #bottom { width: 638px; background-color: #fff; color: #333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin: 0 auto; border-left: solid #70cbf7 1px; border-right: solid #70cbf7 1px; } #article { width: 430px; float: left; background-color: #fff; padding-left: 10px; padding-right: 10px; margin: 0 auto; border-right: solid #70cbf7 1px; } #links { width: 184px; float: right; background-color: #fff; padding-top: 55px; padding-left: 3px; } #footer { width: 640px; font-size: 10px; text-align: center; margin: 0 auto; background-color: #004296; color: #fff; } Code (markup):
Ok i fixed the border issue - just added overflow:hidden to the #bottom div and that seemed to work (however I am not sure why - I saw it posted in another thread and tried it. Any explanation on why? I'm curious) I still have that weird space between that section and the footer though...
apparently overflow:hidden is a cure-all for me today. It fixed that weird space too Would still love for an explanation on what it means though, and if it's a valid fix for my issue. Thanks!
The overflow property is very useful as it wraps floats if applied to blocks containing floated elements. It may have fixed your problems, but that page you have is really an array of nonsense. I understand that it's a newsletter template, but it still doesn't justify some of the fails present. For instance, the way you used numbered headings is...well... unexplainable, (trying not to use the R word). You clear floats with an empty div, which was perfectly fine until 10 years ago (NOT that it is now), but you give those DIV an ID called clear instead of a class, resulting in a gibberish markup. A side note: write <!--/header--></div> instead of <!--/header--></div>, since the latter is proved to trip bugs on some browsers. Try using a meaningful sign instead of that backslash (. for class; # for ID). --edit-- I kind of missed the most important thing I wanted to say. Due to the way it's coded, this template won't work in, at least, 90% of email UA.
"Due to the way it's coded, this template won't work in, at least, 90% of email UA" Can you elaborate? I've coded other basic emails similarly in the past and haven't had an issue.
...which implies that you didn't actually test it. The wast majority of email clients don't support CSS, much less when your STYLE tag is within the HEAD. (I'm not saying that it shouldn't be -- as a matter of fact, if you're separating presentation from content, which you should do, you won't use the STYLE tag in the first place. But let's forget the STRICT spec and semantic markup for a minute, we don't have a choice anyway) See, when it comes to the email templates, all that DIV you used along with the styles are pretty much useless. The only way to achieve what you want is by using tables for layout. The only way to style elements is by using deprecated and obsolete attributes that have no business on a website written after 1998. But again, email templates aren't web, and we don't have a choice. For instance, Outlook's behavior is closer to Microsoft Word then it is to IE. Weird, huh? As much as it hurts to admit it, the only way to code a cross-client compatible email template is by thinking as if it were 1997. A word of warning. If you didn't fully understand the strict spec and don't really know much about what's bad practice and what's not, I highly recommend staying away from the antipathetic nonsense of the email template coding.
Much less hosts like myself who use the presence of HTML in a e-mail to mark it as spam and auto-move it to the junk box -- since there's no legitimate reason for html in a e-mail in the first place. But as wiicker95 implied, most mail clients can't handle "real" or "modern" CSS, much less HTML. They just can't do it, which is why IF you are going to make HTML E-Mails you have to dial the clock back to 1997 and write it ENTIRELY in HTML 3.2 Which is another strike against using HTML in e-mails in the first place... which is why I suggest you listen to Frankie goes to Hollywood.
Thanks for the information - I am looking more into it with what you've given me. I appreciate it. Here's a dumb question then - deathshadow, you said there's no legitimate reason for HTML in emails - so what do you say to clients who ask you to design them an e-newsletter campaign?
Put the newsletter on a website as a sub-page (that way people NOT on the mailing list can read it and "back-issues"). When you have a new 'issue' come out you send a small simple plaintext extolling it's virtues with a simple link to the actual newsletter in it. That way you aren't hitting up against filtering like mine, you aren't annoying people with buggy broken e-mails (since even as 3.2 they've NEVER worked right), you're expanding the potential target audience, and you can put whatever you'd put on a normal website in the newsletter in terms of markup, style, scripting, what-have-you without worrying about the limitations of mail clients. It would probably also use less bandwidth -- and don't forget that search engines would now see it too, drawing in more visitors since something like a newsletter is typically "content of value".
Oh, and looking at the original, your markup is... well... no nice way to put this... HORRIBLE. Your use of numbered headings is absolute gibberish, you're fixing the heights of elements that shouldn't be fixed, endless pointless DIV for nothing... and if you were going to use CSS you should be using MODERN markup, which means there's no such thing as CENTER, FONT, etc, etc... Seriously where's the h4 that h5 in the footer is a subsection of? Do you really mean that text to be the start of a subsection of that H3 "Weight loss support"? You start out with a H4, where's the H3, h2 and H1 it should have as parent elements? You're skipping around levels willy-nilly with nothing remotely resembling logical document structure. Almost looks like you were choosing tags based on their default appearance instead of their meaning -- and as I've said many times if you're choosing tags based on what they look like, you're choosing the wrong tags for all the wrong reasons. NOT that I'd be designing fixed width layout with px metric fonts in 2013 ... or did you already start rewriting that to be HTML 3.2 because, well... you're halfway there. It's like an oddball mismatch of outdated and modern code -- though admittedly that's what "transitional" MEANS; in transition from 1997 to 1998 coding practices. Oh, and since an e-mail isn't an actual website, even when built with HTML -- you can't share them on facebook or twitter.
Hi again. I re-did the email HTML using all tables and inline styles. I tested the previous version and only had an issue in Outlook - after reading what you had all told me about email support I did some research and thought I would have a problem in Gmail as well, but surprisingly it showed up perfectly when tested in Gmail, yahoo, Apple Mail and iOS clients as well. Regardless, I needed Outlook support so I redid it with tables. I've not coded with tables in years so bear with me. Everything looks fine except the widths seem off and the vertical line I have separating the 2 bottom sections is cut off and I can't figure out why. Any guidance would be great. Thanks again! http://jennilynn.net/NewYearRes/NYEnew.html If you'd rather me copy/paste code in here I can. Not sure if its easier to view on the actual site or copy/pasted here.
my client tested in Outlook and got this result. I'm now super frustrated because I was hoping tables would fix the big layout issues
border="0px" width="680px" invalid properties, HTML does not accept PX as a measurement, that's CSS. You want pixels in HTML, just say the value. <table bgcolor="#CCCCCC" width="100%" border="0px"> <table width="680px" bgcolor="#FFF" border="0px" align="center" style="border:none"> Code (markup): table for nothing and INVALID TABLE NESTING. you want bgcolor on the whole page, declare that on BODY. The only tags that can be direct descendents of TABLE are THEAD, TBODY, and you can do TR though in that case TBODY is assumed. You can't say <table><table>, it has to be <table><tr><td><table> at the very least! You are also failing to set cellpadding and cellspacing to zero, and those have wildly different default values cross-browser. (I think those negative margins you added are an attempt to deal with that?) I'd also advise against using an XHTML doctype, since it's going to be HTML 3.2, write HTML 3.2. (so that means no STYLE attribute either)... And yeah, you really can't use ANY CSS so that means all those things you are doing with the STYLE attribute? You can't do that either. Though all those images as text are a complete /FAIL/ at accessibility, usability and in many ways defeats the whole POINT of using HTML in the first place... Your code goes on and on like that with bugs/errors for quite a while. Been a while since I've done any HTML 3.2, but lemme take a stab at a rewrite for you to show you what I mean. For now I'll just leave the images as-is, throw semantics out the window and try to just make it work.
Thank you! I just saw that after an hour of researching and that helped in Outlook, just by taking away 'px' after the width attribute
I didnt know that about the STYLE tag though; I had read elsewhere (numerous places) that I could pretty safely use that as long as it wasnt up in the HEAD area.
STYLE as an attribute (not a tag) is still CSS, and on the whole you're best forgetting CSS even exists if you're trying to make an e-mail -- which is why we said "use HTML 3.2" since it pre-dates that. I just did a quick rewrite to show how I'd approach that as raw 3.2 with no CSS. It would still break on large font/120dpi systems on browsers that support it (like myself in Opera) -- but it's probably the best you're going to do in terms of making it for an e-mail. http://www.cutcodedown.com/for_others/Jennilynn/template.html your images aren't quite identical sizes where you sliced 'em BTW I had to use font with relative sizes since legacy HTML can't do PX for font sizes, and the FONT tag had to go just about everywhere since TH and TD don't inherit from BASEFONT. (They actually SHOULD, but browser makers have never actually implemented 3.2 properly... just as they never finished implementing 4 properly either! Naturally they're moving on to 5 which nobody will implement the same or properly either since it's a superset... progress, RIGHT...) I wrapped the whole thing in an invalid FONT tag to set the FACE -- but since it's 3.2 it's not like validation means a blasted thing since, well... that pre-dates validation and the W3C validator chokes on completely valid attributes (like FACE) on markup that out of date. Now if you'll excuse me, I feel like I need a shower after writing code that ugly Uhg... Pre-CSS HTML, ugly as sin. -- edit -- Oh, you might want to consider using the BASE tag in the HEAD to simplify the URL's in all the src and href, but I'm unsure how or even if that would work in all mail clients... Probably best leaving those as is I guess...
Wow, i REALLY appreciate you taking the time to do that. I'll keep that and compare it to what I have now so I can learn from it as this client is going to want more of these newsletters down the line. Much appreciated!!
I'd have to imagine you're a developer somewhere, correct? Or just obnoxiously smart when it comes to all this
I've been retired for a few years. Used to run my own hosting and do web development -- though overall I've been programming and building computers for some three and a half decades. I was the director of IT for one of NY Life's data centers, worked for Wang for a few years, even spent some time working in marketing and development for a non-profit. I'd probably still be doing this stuff full time if not for a few years back having several bad things intersect -- failing health and medical malpractice put me on doctors orders not to work, my non-24 sleep wake syndrome making it hard to keep any sort of time schedule and medication induced parkinsonism (did I mention the malpractice?) made it hard to keep even the simplest of clients -- and it all came to a head when I finally snapped at someone: "You hired me for my knowledge because you don't know anything about doing this. If you're not going to listen to anything I'm telling you what the **** are you even paying me for?". You mix in my disgust for where the entire industry is headed with asshat bullshit like jQuery, CSS frameworks, HTML 5 and so forth, and I'm really no longer what you'd call "client friendly". At this point most people who would need to 'hire' someone to make a website for them, IMHO shouldn't have their own websites! Naturally of course such people are the obvious target for the endless sleazeball scam artists who vomit together off the shelf garbage like turdpress any old way and then rape them for every last penny -- and like Don Quixote I'm one of the few fighting against that particular windmill. Still, I like to keep up to date and keep a hand in, maintaining my own stuff and helping out where I can when I can. "Retirement" is tough for someone like myself who has trouble just sitting around with my thumb wedged up my backside. I've got a lot rattling around in my cranium, if others find it useful good... if it offends someone when I speak my mind -- good, those so offended probably needed a wakeup call anyways. But then my personal heroes are George S. Patton, Simon Cowell, Gordon Ramsey, Charlie Frattini and the Vancombe Lady. In any case, to me web technologies and all these 'new' languages are nothing new at all; it's the same dance just a different tune. I specialized in database programming for years (specifically double entry accounting systems), and it's the same basic idea of taking data and getting it to the user. ...The laugh being I was shoving around more data a day 20 years ago off a 486/50 with Netware 3.12 than the average forums chokes to death a quad core Xeon with... I think the problem most people have is a failure to grasp the purpose of HTML, the purpose of CSS, and the history of both; hence why most of the ignorant twits making websites dive for garbage like jQuery or frameworks in the first place, and never truly grasp what semantic markup means or why it has so many advantages... much less why HTML even exists in the first place! That's why idiotic nonsense like HTML 5 is thrown about more as a buzzword than providing anything of real value so far as being a markup specification is concerned.
You're fighting a losing battle with HTML5. You will just going to have to accept it, just as Patton had to apologize for slapping two soldiers.