html - Prevent css override from content loaded into a div -
i developed simple webmail client connect account , download emails postgres db. problem when retrieve content (html) div, when email has css attributes, overrides css of entire page.
is there workaround prevent this?
ps.: i'm putting html code directly in div, this:
<div id="html-container"> html loaded db </div>edit 1:
i forgot mention i'm using twitter-bootstrap on entire page.
edit 2:
an example of e-mail downloaded , 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 { 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 { 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 { color:#672833; } /*-----media queries-----*/ /* removes unwanted borders around hyperlinked images */ img { border:0; outline:none; text-decoration:none; } /* smaller mobile devices */ @media screen , (min-width:10px) , (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 screen , (min-width:401px) , (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 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 principais marcas 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 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 você, me indicaria pessoa de contato?</em></div> <div><br></div> <div><em>agradeço 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:vendas@asiaprint.com.br" href="mailto:vendas@asiaprint.com.br" target="_blank" class="validating" style="color: rgb(103, 40, 51);"><em>vendas@asiaprint.com.br</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 stack character limit]
you can use web components encapsulate css.
.test { width: 50px; height: 50px; background-color: blue; }<template> <style> .test{ width:50px; height:50px; background-color:red; } </style> html loaded db <span class="test">test</span> </template> <div id="html-container"></div> <span class="test">test</span> <script> var tmpl = document.queryselector('template'); var host = document.queryselector('#html-container'); var root = host.createshadowroot(); root.appendchild(document.importnode(tmpl.content, true)); </script>
Comments
Post a Comment