Issue with Preview in Browser showing broken content

John McEvoy · May 2010

Hello.

First off, I design mostly on a Mac and, naturally, things look fine in Convio and in my Inbox.

However, when I check my files (both email and PageBuilder pages) on a PC in Internet Explorer, everything falls apart. I realize this is a common occurrence, as IE is difficult to work with, but what I'm seeing is very bizarre.

Basically, when I load my HTML code into Convio, save it and then click the Preview link, the email pops up and looks perfectly fine. But, when I then click on the Preivew in browser link at the top of the page, all of the content breaks; images are split apart, conent is no longer centered, tables aren't aligned right, fonts break, etc. Just a total mess.

I code with Inline CSS for my emails with very little CSS declarations in the <head> section, but I just can't figure out what is causing everything to break, all at once.

I am attaching screen shots of what I'm talking about to help illustrate the issues.

Any/all help or ideas would be greatly appreciated, as this seems to be a common occurrence.

Thanks in advance.

- Cris

Brian Mucha · May 2010

I'm just getting through dealing with the whole 'view in browser' thing for the first time. We had been doing emails with an external vendor, and not Convio.

When you click on that link, you are opening your email's code in Convio's 'MessageViewer'. That app - like a few other multi-purpose pages such as Login - displays it's content in whatever page wrapper the user last saw. This is so the content matches the site they are viewing, be it your main site, some teamraiser, or whatever.

I bet what is happening here is that the stylesheet for your pagewrapper is interfering with your design. Figure out what ever style declaration in your pagewrapper is messing with you and override it in your email stationary's styles. I add the !important modifier just to make sure.

This link speaks to this issue.

http://community.customer.convio.com/message/10511#10511

I wound up there while following Noah's recent post about adding Facebook and Twitter share links to emails. (They are both actually sharing the web view of your email.)

Regards, Brian

Brian Mucha · May 2010

Brian Mucha:
I'm just getting through dealing with the whole 'view in browser' thing for the first time. We had been doing emails with an external vendor, and not Convio.

When you click on that link, you are opening your email's code in Convio's 'MessageViewer'. That app - like a few other multi-purpose pages such as Login - displays it's content in whatever page wrapper the user last saw. This is so the content matches the site they are viewing, be it your main site, some teamraiser, or whatever.

I bet what is happening here is that the stylesheet for your pagewrapper is interfering with your design. Figure out what ever style declaration in your pagewrapper is messing with you and override it in your email stationary's styles. I add the !important modifier just to make sure.

This link speaks to this issue.

http://community.customer.convio.com/message/10511#10511

I wound up there while following Noah's recent post about adding Facebook and Twitter share links to emails. (They are both actually sharing the web view of your email.)

Regards, Brian

By the by, I find the Web Developer plug-in for Firefox very valuable for tracking down things like this. Not sure about Macs tho.

In Web Dev there is a CSS > View Style Information tool. Any styled item you mouse over is highlighted, and a click displays a list of each style affecting the element and where it lives. Neat.

http://chrispederick.com/work/web-developer/

Regards, Brian

Edit: The site says it works on FF for Mac.

Issue with Preview in Browser showing broken content

Comments

Categories