- What you'll do is put in the image as a regular image, but hide the image and set a modified image as the background image for smaller sizes. I think for smaller sizes- doesn't the device win? And the device will see the stylesheet.
- I'd probably set the images to be width="100%" then style="max-width: 800px;"
- Most importantly, publish your litmus test and send it to the client "for their approval." I have found that this single step is more powerful than words- because in their minds it is pixel perfect and anything I say will never be as powerful as them actually seeing the test on the different browsers.
A good rule of thumb is to start your troubleshooting by explicitly defining suspect properties.
Unique code, divs and paragraphs, to start- explicitly set padding to 0. Make sure you get your border-collapse: collapse in there too. Microsoft loves to inherit.
I know it's not quick and easy but It's really the best way to find the offending item.
So we think we've worked out what it is- apostrophes. My colleague Joanne was troubleshooting code - basically a line-by-line comparison of an email that worked vs one that didn't, when she narrowed it down.
She discovered that if there are apostrophes in the text, test emails won't render through the mail client for Blackberry 5 devices. I then suggested she try using the apostrophe HTML entity and trying a resend- sure enough, it worked and the test email rendered on Blackberry devices.
Further testing revealed:
1. if you copy and paste from Notepad, you will not have this issue.
2. if you copy and paste from Microsoft (either Outlook or Word) then you will have this issue, even if you right-click and paste as text only
3. you will still have this issue if you copy/paste text into the code view in Dreamweaver (which, huh??) - even if you right-click and select "paste text only" or any usual workaround.
4. if you copy and paste into Notepad first, then copy and paste THAT text into your code, the email tests rendered properly.
I'm a little late on this question but just in case someone comes across this by searching-
I don't think that this is a good idea to do- I think it's important to style your fonts even when the cell only contains an image- especially if that image contains text. When the image contains text (I try to avoid this across the board but sometimes it cannot be avoided), I will put that text into the alt tag, and then style it - ideally to closely match the look of the image, or at the very least provide some relief in terms of styling so the text isn't just whatever the context default happens to be. In this way, the person who receives the email will still get a feel for the email even if images are turned off- and hopefully it will encourage them to turn the images on to see what else the email wants to show & tell.
What do you mean exactly by column break issues? What isn't working properly?
Looking at the code, I see one irregularity- On line 259 you have a table with a width of 12. However, its complement on line 311 only has width="1". What happens when you make those spacer tables the same width?
It's tricky but sometimes the only thing you can do is give advise as the subject matter expert and then let them learn from the mistake if they persist. Litmus definitely makes for fewer of these mistakes with screenshots though.