How to disable foundation or bootstrap styling for a block of html code?

Question

I am using mailgun (although this question has nothing to do with mailgun) to parse the incoming email and mailgun will http post the parsed email to my server. When I received the post, I got the html code for the multi-part email. I want to display the html email to my user, I am using rails, so it's something like

<div>
  <%= raw(message.body_html) %>
</div>

However, it looks different than it does when I view the same email in yahoo or hotmail (I know different email client will display the html email differently, but mine looks drastically different).

Here is how it looks on my self-built client:

And this is how it looks in yahoo for the same email:

I use Zurb Foundation as my styling framework. However, I think the email html comes with its own in-line styling, I look at the code it does look like it does, then it should look similar enough with other clients.

So what is the best practice to display html email assuming you get a block of html code and want to display it as is without letting other frameworks overwriting its style?

Further more, is it possible to disable Foundation (or twitter bootstrap for that matter) styling for a block of code, for example, something like

<div>
  <% disable_foundation_styling begin %>
    <%= raw(message.body_html) %>
  <% end %>
</div>

Of course "disable_foundation_styling" is only my imagination.

Thanks in advance!

!!!!!!!!! Update 1/1/2013 !!!!!!!!!!!!!!!

As @Alex L. suggested, I tried but it doesn't quiet work as expected. The iframe renders everything in the view as before (see picture below), and that's understandable, since the iframe content is just the view of another controller, which in the case rails will include all the application layout templates as well. However, the toolbar is not my biggest concern, it's what's inside the iframe just looks exactly as before.

I suspect iframe may not be the way to do it. I look at the code of both gmail and yahoo, and they don't use iframe. Instead they use very deep nested to render the html email. The part of the html email have the same code for both yahoo and gmail, except that yahoo insert an id of its own for every single DOM element.

So now I suspect there is some foundation styling that affected how it looks.

I will update once I find out more.

Answer 1

To my knowledge it's not possible to instruct a browser to selectively ignore your page's CSS within a subset of the DOM. You have to explicitly override the page's existing style.

However, if you have an iframe element, the contents of that frame will be rendered independently of any styles applied to the containing page. So you could create a separate controller and view just for rendering the contents of your message, and use that as the source for the iframe .