How to display html email in the browser without it changing my bg colors and altering my table

Question

In a new app, I'm building, I want to display an html email in a table in the browser.

The issue is that the html emails are changing the background color of my webpage and at times ends an html table I am using to display multiple emails.

The emails usually contain full html, body, div, and table tags. A normal occurrence is an body bgcolor"ff0000" which turns my entire app's background red.

Is there a way to combat this or do I have to code it to take out the html tags.

Also, I tried showing the email code in a iframes, but to no avail. it actually didn't display the code at all, just a blank iframe box.

<iframe>Body of html email here</iframe>

I'm sure I'm missing something simple - any help would be appreciated.

Btw, the email html is being held in a php string.

Answer 1

what you can do is use javascript to inject the HTML of the email into the iFrame. The reason it changes your backgrounds is because you've got global styles in the stylesheet for the email, and they are getting applied to the rest of the page.

$('#loader_frame')[0].contentDocument.body.innerHTML = YOUR HTML

Answer 2

try to use chrome inspect element to to turn off some css feature and identify what element cause the problem and edit in css

Answer 3

to use iframe's you need to save the email as an HTML page and put a link to that in the iframe's src attribute.

The other way as you've pointed out is to remove the html and body tags. But you'll also need to remove the background styles.

One other thing to try is to make your styles from the parent page always take precedence.

try

body { background:lightgreen !important; /* important will override styles that come later with the same specificity */ }

Answer 4

The content inside the tag is displayed if the browser doesn't support iframes. To use the iframe correctly, you should set the src attribute:1

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

In practice, you could have this src attribute be a url that retrieves the body of the email. For example:

<iframe src="getemail.php?id=12345" width="100%" height="300"></iframe>

Where your getemail.php script takes the requested id and returns the html results which are displayed in the frame.

Answer 5

i would use an iframe in this case too - the problem is you're using it wrong (the code in the tags is a fallback for old browsers):

<iframe src="yoursite.com/youremail.html" width="600" height="600" name="emailFrame">
  <p>Sorry, your Browser can't display iFrames</p>
</iframe>