Question posted in 
I developed a simple webmail client that connect to an account and download the emails to a postgres db. The problem is when i retrieve that content (HTML) into a div, when the email has css attributes, it overrides my css of entire page.
is there any workaround to prevent this?
ps.: i’m putting the html code directly in div, some like this:
<div id="html-container">
My html loaded from DB
</div>Edit 1:
I forgot to mention that i’m using twitter-bootstrap on entire page.
Edit 2:
an example of e-mail downloaded and loaded on div :
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Com quem eu devo falar?</title>
<style type="text/css">
v:* { behavior: url(#default#VML); display: inline-block; }
body {
max-width:600px;
margin:auto;
}
td {
cellpadding:0px;
border-spacing:0px;
}
tr {
cellpadding:0px;
border-spacing:0px;
}
table {
border-spacing:0!important;
border:none;
}
.containerbox {
width:100%;
max-width:600px!important;
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#aweber_rem {
margin: 0 auto;
}
center > div {
box-sizing: border-box;
}
/*-----HEADER-----*/
.headers {
color:#ffffff;
padding: 10px;
height:330px;
}
.headers .headline {
font-size:28px;
color:#ffffff;
font-weight: lighter;
}
.headers .paragraph {
font-size:14px;
color:#ffffff;
line-height:150%
}
.headers a {
color: #ffffff;
}
/*-----MAIN-----*/
.main {
font-size:14px;
color:#4C4C4C;
padding: 10px;
}
.main .headline {
font-size:24px;
color:#4C4C4C;
}
.main .paragraph {
font-size:14px;
color:#4C4C4C;
line-height:150%;
}
.main a {
color:#672833;
}
/*-----ARTICLES-----*/
.article {
font-size:14px;
color:#4C4C4C;
padding-top:10px;
padding-bottom:15px;
}
.article .headline {
font-size:20px;
color:#4C4C4C;
padding-bottom:5px!important;
}
.article .paragraph {
font-size:14px;
color:#4C4C4C;
line-height:150%;
}
.article .permalink {
text-align: right;
color:#672833;
}
.article td{
padding:0px;
}
.article1 img{
padding:10px 10px 0px 0px;
}
.article1 .paragraph{
padding-top:5px;
}
.article3 img{
padding:10px 0px 0px 10px;
}
.article3 .paragraph{
padding-top:5px;
}
/*-----FOOTER-----*/
.footers {
font-size:14px;
color:#4C4C4C;
padding:10px;
}
.footers .headline {
font-size:20px;
color:#4C4C4C;
}
.footers .paragraph {
font-size:12px;
color:#4C4C4C;
line-height:150%;
}
.footers a {
color:#672833;
}
/*-----MEDIA QUERIES-----*/
/* Removes unwanted borders around hyperlinked images */
a img {
border:0;
outline:none;
text-decoration:none;
}
/* Smaller Mobile Devices */
@media only screen and (min-width:10px) and (max-width: 400px) {
.containerbox {
max-width:300px!important;
margin:0 auto!important;
clear:both!important;
}
.sidebar2 td {
display:block!important;
width:100%!important;
}
.main td {
display:block!important;
width:100%!important;
}
table {
width:100%;
}
.headline {
font-size:20px;
}
.paragraph {
font-size:16px;
}
img {
height:auto!important;
max-height:300px;
max-width:100%;
}
.share img {
width:20px!important;
height:auto!important;
display:inline-block;
}
}
/* Larger Mobile Devices */
@media only screen and (min-width:401px) and (max-width: 500px) {
.containerbox {
max-width:100%!important;
margin:auto;
clear:both!important;
display: block;
}
table {
width:100%;
}
.sidebar2 td {
display:block!important;
width:100%!important;
}
.main td {
display:block!important;
width:100%!important;
}
.headline {
font-size:20px;
}
.paragraph {
font-size:16px;
}
img {
height:auto!important;
max-height:300px;
max-width:100%;
}
.share img {
width:20px!important;
height:auto!important;
display:inline-block;
}
}
</style>
</head>
<body>
<center>
<div align="center">
<div class="containerbox" style="width: 100%; max-width: 600px; font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;">
<center>
<!--[if !mso]><!-->
<table cellpadding="0" cellspacing="0" bgcolor="" style="width: 100%; max-width: 600px !important; border-spacing: 0px; border-width: medium; border-style: none;">
<!--<![endif]-->
<!--[if gte mso 9]>
<table cellpadding="0" cellspacing="0" bgcolor="" width="600" style="background-color:;">
<![endif]--><!--Header-->
<tbody>
<tr style="border-spacing: 0px;">
<td style="border-spacing: 0px;">
<table align="center" cellpadding="“5”" cellspacing="0" width="100%" bgcolor="#262626" style="border-spacing: 0px; border-width: medium; border-style: none; background-color: rgb(38, 38, 38);">
<tbody>
<tr style="border-spacing: 0px;">
<td class="headers" background="https://www.aweber.com/images/email-templates/big-sale/red/red-header-img.png" style="text-align: left; border-spacing: 0px; color: rgb(255, 255, 255); padding: 10px; height: 330px; background-repeat: no-repeat;">
<div class="region">
<div aw-contents="1">
<table class="row" style="width: 100%; border-spacing: 0px; border-width: medium; border-style: none;">
<tbody>
<tr aw-contents="1" style="border-spacing: 0px;">
<td aw-attributes="width, valign" class="container" aw-contents="1" width="auto" valign="bottom" style="width: auto; border-spacing: 0px;">
<div class="definition-parent">
<span>
<table align="center" width="100%" class="floated-none" style="float: none; text-align: center;
border-spacing: 0px; border-width: medium; border-style: none;">
<tbody>
<tr style="border-spacing: 0px;">
<td style="padding: 0px 0px 12px; border-spacing: 0px;">
<a class="aw-image-link" href="http://clicks.aweber.com/y/ct/?l=OUro1&m=3Xk0aqxqKa2iwPe&b=aetSWlAcBZYgxYi4YNkk4g" style="color: rgb(255, 255, 255);">
<img align="center" class="model" border="0" aw-attributes="src,alt,width,height" style="margin: auto; width: 600px; height: 360px; border-width: 0px; border-style: none; outline-width: medium; outline-style: none; text-decoration: none;" src="https://hostedimages-cdn.aweber-static.com/Mzc4NTM4/optimized/e0e1f0f6631a4eec813abade96420a7b.png" alt="Outsourcing de Impressão" width="600" height="360">
</a>
</td>
</tr>
</tbody>
</table>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--End Header--><!--Body-->
<tr style="border-spacing: 0px;">
<td style="border-spacing: 0px;">
<table align="center" cellpadding="“5”" cellspacing="0" width="100%" ="" bgcolor="#ffffff" style="border-spacing: 0px; border-width: medium; border-style: none; background-color: rgb(255, 255, 255);">
<tbody>
<tr style="border-spacing: 0px;">
<td class="main" style="text-align: left; border-spacing: 0px; font-size: 14px; color: rgb(76, 76, 76); padding: 10px;">
<div class="region">
<div aw-contents="1">
<table class="row" style="width: 100%; border-spacing: 0px; border-width: medium; border-style: none;">
<tbody>
<tr aw-contents="1" style="border-spacing: 0px;">
<td aw-attributes="width, valign" class="container" aw-contents="1" width="auto" valign="top" style="width: auto; border-spacing: 0px;">
<div class="definition-parent">
<table cellpadding="0" cellspacing="0" border="0" class="headline-element" width="100%"
style="border-spacing: 0px; border-width: medium; border-style: none;">
<tbody>
<tr style="border-spacing: 0px;">
<td class="headline" style="padding: 10px; border-spacing: 0px; font-size: 24px; color: rgb(76, 76, 76);">
<div aw-variable="value">
<div style="text-align: center;"><span style="font-size:18px;"><span style="color:#696969;"><span style="font-family:trebuchet ms;"><span style="background-color:#FFFFFF;">OUTSOURCING/LOCAÇÃO DE IMPRESSORA</span></span></span></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="definition-parent">
<div class="paragraph" style="padding: 10px; font-size: 14px; color: rgb(76, 76, 76); line-height: 150%;">
<div aw-variable="value">
<div><span style="font-size:20px"> </span></div>
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class=" cke_show_border" style="border-spacing: 0px; border-width: medium; border-style: none;">
<tbody>
<tr style="border-spacing: 0px;">
<td style="border-spacing: 0px;">
<div>
<div
style="text-align: center;"><span style="font-size:24px">Empresas <strong>inteligentes</strong> antecipam seus</span></div>
<div style="text-align: center;"><span style="font-size:24px">planejamentos para <u>reduzir seus custos</u>, e SIM podemos ajudar!</span></div>
<div style="text-align: center;"><br></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div><span style="font-size:14px">Olá, </span></div>
<div><span style="font-size:14px"></span><br></div>
<div>
<span
style="font-size:14px"></span>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="width: 763px; border-spacing: 0px; border-width: medium; border-style: none;" class=" cke_show_border">
<tbody>
<tr style="border-spacing: 0px;">
<td style="width: 763px; border-spacing: 0px;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="width: 763px; border-spacing: 0px; border-width: medium; border-style: none;" class=" cke_show_border">
<tbody>
<tr style="border-spacing:
0px;">
<td style="width: 763px; height: 490px; border-spacing: 0px;">
<div><em>Olá, bom dia!</em></div>
<div><br></div>
<div><em>Estou escrevendo com o intuito de encontrar a pessoa apropriada </em><br></div>
<div><em>para falar sobre Outsourcing de Impressão,</em><br></div>
<div><em> visando reduzir os custos de impressão de sua empresa e compras de Toner de Impressora.</em></div>
<div><em>.</em></div>
<div><em>A <strong>Asia Print </strong>, uma empresa com 16 anos de mercado,
fornece soluções de impressão, </em><br>
</div>
<div><em>além de suprimentos cartuchos e toners, tanto original como compatíveis. </em><br></div>
<div><em>Trabalhamos com as principais marcas do mercado Brother, </em><br></div>
<div><em>HP, Lexmark, Epson, Samsung, dentro outras.</em></div>
<div><br></div>
<div><em>Garantimos o melhor PREÇO! Nos Toners compatíveis e originais!</em></div>
<div><br></div>
<div><em>Reduza seu custo de impressão, procure nossos
consultores.</em>
</div>
<div><br></div>
<div><em>Caso você seja a pessoa a quem se destina este e-mail, </em><br></div>
<div><em>para quando podemos agendar uma ligação? </em><br></div>
<div><em>Se não for você, me indicaria a pessoa de contato?</em></div>
<div><br></div>
<div><em>Agradeço a sua atenção!</em></div>
<div><br></div>
<div><em>Um abraço,</em></div>
<div><br></div>
<div><span style="background-color:
initial;"><i>Elisângela</i></span><em> Velasco</em></div>
<div><br></div>
<div><em>E-mail: </em><a data-cke-saved-href="mailto:[email protected]" href="mailto:[email protected]" target="_blank" class="validating" style="color: rgb(103, 40, 51);"><em>[email protected]</em></a></div>
<div><em>Telefone: <a data-cke-saved-href="tel:(11)%204117-9969" href="tel:(11)%204117-9969" value="+551141179969" target="_blank" class="validating" style="color: rgb(103, 40, 51);">(11)
4117-9969</a></em>
</div>
[cutted by stack character limit]
3
Answers
If you don’t want to remove the current inline styles from the e-mails you have two options:
You can use web components to encapsulate all the CSS.
In my opinion, the easiest and the most cross-browser solution is to display the contents of the email in an iFrame. Note, you can generate an iFrame with a certain content using javascript, as such:
The styles inside an iFrame will not leak into the styles inside the main document and vice versa.