3

i've saved the html of emails body to my database. Now i would like to display this html on a site. the only problem is, that some mails have css definitions that overwrite my whole definitions on my site. How can i display this mails without having my html/css beeing overwritten?

Thanks rk

ramo
  • 353
  • 6
  • 22
  • 2
    Have you considered [`iframe`](https://developer.mozilla.org/en/HTML/Element/iframe)s? – David Thomas May 13 '12 at 21:04
  • 1
    Use iframe if you don't want change anything to your current css. If not, you need rewrite the html email css. Maybe just add new ID to the body `` or wrap it by a new div ID – huhu May 13 '12 at 21:10
  • yeah, but how to add this to iframes? for example, if i use the following jquery $('').load(function(){ {{ mail.mailContent.body|raw|purify}} }).appendTo('#test'); where #test is the id of a div that surrounds the iframe, i get an error:

    ---------- Forwarded message ----------
     – ramo May 13 '12 at 21:24
  • To clarify you want to maintain the CSS of the email and your site without any CSS inheritance between the two? Then yes, iFrame would be the way to go. – Jeff May 13 '12 at 21:31
  • But how do add the mail body into the iframe? for me with the above setup its not working – ramo May 13 '12 at 21:32
  • http://stackoverflow.com/questions/4119979/create-an-iframe-element-and-append-html-content-to-it-with-jquery – Jeff May 13 '12 at 21:33
  • this is not working for me... i'm getting the error: missing ; before statement [Bei diesem Fehler anhalten] ...color:rgb(255,255,255);">ä – ramo May 13 '12 at 21:48
  • I'd have to see an example to help any further, create a JSFiddle or something to show the full syntax. – Jeff May 13 '12 at 21:56
  • http://jsfiddle.net/6fYPE/2/ no text is displayed – ramo May 13 '12 at 22:17
  • looks like you worked it out? Though the issue with ' vs " wouldn't be an issue if you first load the text into a variable... – Jeff May 13 '12 at 23:18
  • Oh yeah, in chrome it works... in FF 12.0 it's not displaying any text – ramo May 15 '12 at 12:51

3 Answers3

5

I suggest using an Iframe, or rewriting your css.. sorry mate!

Wampie Driessen
  • 1,654
  • 1
  • 13
  • 19
3

Use the !important rule in your CSS, see http://www.w3.org/TR/CSS21/cascade.html#important-rules for more details.

Example:

​#test {border:1px solid green!important}

​#test {border:1px solid red}​

This element should have a green border.

Jeff
  • 846
  • 8
  • 13
2

in my experience with emails, i'm going to assume those declarations are written inline....your best bet is to strip them out. you could try to override them with super long chain selectors, like putting a class on your html element and your body element, while also applying the !important value that @jeff said.

albert
  • 8,112
  • 3
  • 47
  • 63
  • yes, it's inline css. i don't have any influence of this emails, they could be newsletter from any source. but how is gmail doing it? if you're looking at gmail, they display the newsletter as it is... withought destroying the whole css of their site – ramo May 13 '12 at 21:26
  • It's not "valid" html but you could also just add your CSS in the body after the html is inserted. That would, in effect, re-overwrite the css again. – Jeff May 13 '12 at 21:28
  • idk how gmail does it man. sorry. im sure it has something to do with resets and global style sheets. remember, most of these emails are html2 or 3, table based layouts. imo semantics and clean markup dont even come into play...just get down and dirty to get your desired effect – albert May 13 '12 at 21:40