My first suggestion is to check that you opened and closed all your tags correctly and your tables are formatted with all the necessary tr and tds. Just pasting into Dreamweaver the code had a bunch of basic errors in your nested tables. I am actually surprised that this hero image is the only issue you are having.
Does your ESP have it as as setting you need to select? We use Salesforce and even if I set the charset in the html, if it is not set correctly in SF it will give spotty results.
I collect samples of awesome emails and research how we could potentially implement them for our non profit. We 've had a few vendors come in and give us demos. We are currently putting together use case scenarios for our VP to justify a new product. Our marketing managers are putting together a report on potential ROI and how we will be measuring success of new implementations.
Personally I try to stay up to date on email and spread my knowledge internally. When I do ask for something that will bring our game up, I feel this helps with credibility and my suggestions will be given due consideration.
Off the bat my first issue is you have two font stacks within the same style="", not sure why you need to add !important either.
I don't really see anything in particular that would cause the funny characters. Do you have this in your head?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Could you hack something off a bullet proof button with rounded corners and just not make it clickable but to hold content? It would be square in outlook but should be rounded elsewhere. You could then via CSS expand them to 100% with CSS. To make them stack I would do two tables held in a row (align one left and one right). This will make them stack.
Haven't tried it but that was the first idea that came to mind.