cheli — 2013-04-03T22:09:01-04:00 — #1
I'm working on a responsive html email template. A lot of email browsers will only read inline styling, but I find it really hard not to make mistakes working with that kind of code, so I've developed a workflow where I write my HTML with an embedded CSS stylesheet, then run that code through Premailer, which moves the styling inline for me. Pretty sweet!
In this case as I'm making a responsive template I've run all but the media query through premailer, then pasted it within <style> tags in the head of the document so that the design can remain responsive in email browsers that do pay attention to this part.
Unfortunately, something in my template has broken during the process of making the styling inline. In my design, a logo at the top of the document resizes and moves to the top when the browser window is less than 480px wide. In the [embedded version, the logo remains centred, whereas in the [URL="http://www.wehi.edu.au/uploads/e-mail/Final.html"]inline version](http://www.wehi.edu.au/uploads/e-mail/Template7.html) it moves to the left.
I'm finding it hard to work out why this is happening, in order to be able to fix it. Can anyone help?
ralphm — 2013-04-03T22:23:53-04:00 — #2
Hi cheli. Firstly, well done for setting this up so well to make the situation clear and easy to assess. (It's rare to see it so well done. )
From looking at it, it seems that in the working version, you have
id="contentWrapper" on the surrounding <table> that sets its width to 320px, while this is not replicated in the version that's not working. So you could do something like this:
<table <font color='"#FF0000"'>style="width: 320px !important"</font> align="center" border="0" cellpadding="0" cellspacing="0" height="100" width="600">
Not very pretty, but that's HTML email for you. :rolleyes:
Hm, now I realize that this messes up the larger version of the layout. Since you still have @media rules, perhaps just replace the id attribute on the table that seems to have gone missing.
Yes, tested that, and it's what I should have suggested first up. Just replace the missing ID:
<table <font color='"#FF0000"'>id="contentWrapper"</font> align="center" border="0" cellpadding="0" cellspacing="0" height="100" width="600">
cheli — 2013-04-03T23:31:32-04:00 — #3
Hi ralph.m, you come to my rescue again! I'm very glad you found my explanation clear - I know it's hard to explain things sometimes so I'm glad it wasn't too garbled
Replacing the 'contentWrapper' ID works on my end too - I've even realised why it happened too so I think we can declare this case solved!
In Premailer, you can ask it to remove unused IDs when converting to inline styles. I'd checked that option; forgetting that with the media query removed, the 'contentWrapper' ID suddenly appears unused. Yay for easy and simple fixes
ralphm — 2013-04-03T23:40:18-04:00 — #4
Glad that helped. Thanks for the feedback.