Isolate CSS in element from rest of page - javascript

I am displaying HTML emails in a page and often those come with general style information that I need to isolate from the main page. For instance, if the email looks something like this:
<style type="text/css">
body { background-color:#000; }
</style>
<div>
email's content here
<div>
I end up with a black background on the whole page.
I've tried iframes, but I need the content's height to be dynamic (I don't how big each email is until it is rendered), which it seems one can only do with javascript. That is an option, but it seems rather hacky. Is there a standard, clean way of doing this?

If your constraints permit it, you could display each email in its own iframe.

Put a unique class or ID on the containing div and use that as a selector for all the styles:
<style type="text/css">
div#emailcontent { ... }
</style>
<div id="emailcontent">
...
</div>
It's a bit of a pain, but that's the only way to restrict styles to only part of a page.

For HTML email, I would suggest to use inline CSS. Sometime, unique class or ID doesn't work on others emails clients. And don't use java script in emails too, using javascript is not acceptable in email marketing. Please hard code for every tags with inline code to compatible with cross email clients.
p tag should convert in to span tag; in cross browser, p tag give some padding and margin. p tag is good for whole section of paragraph if you would like to use. Make sure you define inline code in each tags like :
< span class="headlines" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px; font-weight: normal; color: #03588c; line-height: 18px;">foo< /span>
Margin and Padding shouldn't use in css coding for HTML. That doesn't work in cross email clients.

Related

overriding percentage font-size attribute from html tag

I have a simple webpage where opening html tag has an attribute font-size:60% !important set in css file.
<html>
<head>
... some js and css ...
</head>
<body>
... header ...
... content ... <-- need to replace that by new content
... footer ...
</body>
</html>
Everything is rendered well (header/content/footer).
I also have another file where I've got content to be placed on this webpage (based on bootstrap 4) and I am not allowed to modify existing js/css files (they are loaded via API, so created dynamically).
Problem is that this content looks well when I render it it in separated file as it is. Once I replace old content with new (leave header and footer) and add css files it looks well but of course everything is smaller due to this font-size set in html tag.
Is there any way to make it working?
I've tried to unset current font size by font-size:unset also in html tag (by adding and targeting class) and then my content is rendered properly but unfortunately header and footer have to big font then.
Looks like the best way would be to unset this font-size only for this new content which can be enclosed in a div but I didn't found a way to do that.
Here is a jsfiddle: fiddle
It basicaly shows my problem, html tag styling is loaded with external js API and cannot do anything with that.
I am backend programmer so do not have much experience with all css stuff. Need help with that...
If you can add all your new content in a div, as you say, and then add a class to that div like:
<div class="content">…</div>
Then your css to set the font size would be:
html .content {
font-size: 100%;
}
Now for your specific problem:
Say the font-size was 100px (as an example);
the font-size set on <HTML> is 62.5%, so 62.5px;
The font-size for the content wants to be back to 100px, and %'s are relative, so if you do 100% on the <content> you get (100% * 62.5px = 62.5px);
You need your content bigger, and this works out to be (1 / 0.625 = 1.6x, or 160%)
I believe your solution is then to set css of:
html .content {
font-size: 160%;
}
You should not need the !important flag for this to work.
body {
font-size: 137.5% !important;/*62.5% = 100% - 37.5% so 137.5% will be original font size*/
}

How do I unbold text beside javascript?

I've created a website: www.mvscaccounting.com and at the bottom of the website I have a search engine made from javascript. Beside it, I wanted to write all rights reserved. However whenever I write anything beside the search engine in dreamweaver, it turns bold!
Problem: I can't get it to unbold! it's not bold in dreamweaver, but on website it is
I tested it out, and the unintentional bold text starts when the javascript form is made. If you go to my website, and view page source you can see all the surrounding code.
**** UPDATE: THE PROBLEM HAS BEEN SOLVED, IT WAS A MISPLACED H3 TAG ****
It's bold because it is inside an <h3> element, which is rendered with bold text as defined by the default stylesheet for HTML.
Here's a snapshot of the document in Chrome:
There are several ways to override this. Try adding this to your stylesheet:
.red { font-weight: normal; }
This will cause all elements that are marked with class="red" to use the normal font-weight, even though they're embedded in an element that should be rendered in bold (like <h3>).
You could try adding this rule to the "red" class.
font-weight: initial;

How to render email template in a page?

I have an email template which I wants to render in a page. email template have their own CSS like :
<style>
body{
font-size : 20px;
}
</style>
, when I am trying to render email template on my web page their CSS is overriding my page CSS. How to resolve this overriding issue ? , I want to render template like gmail.
Note : Dont want to render inside iframe.
Option 1 When doing email styling, keep the styles inline. While CSS is supported by many email clients today, the best way to prevent them from interfering with the rest of the page is to restrict the styles to the individual cells.
In essence, you're gonna have a lot of:
<td style="font-size:20px">
content here
</td>
Option 2 If you cannot change the email HTML for some reason, the other way is to adapt your page CSS to be stricter, and more targeted to specific elements on the page.
Assuming your page has a header, a main content and a footer, and the email is appearing inside a section of your main-content, you should give each of these blocks an id. Then, your page CSS could look like this:
/***
* Header
***/
#header {
font-size:16px;
}
#header-nav {
font-size:15px;
}
#header-nav > a { /* affects all links inside header-nav */
font-size:14px;
}
/***
* Main Content
***/
#main {
font-size:18px;
}
#email-section {
/* we expect font-size of the email to be declared within itself.
And we are not worried that its style would overwrite any other
*/
}
#some-other-section {
font-size:14px;
}
#some-other-section > p { /* all paragraphs in this section */
font-size:16px;
}
/***
* Footer
***/
#footer {
font-size: 16px
}
If you follow this discipline of targeting your elements very specifically with your CSS, you usually have little to worry about when you import external stylesheets into your page.
Often, you see people using too loose selector rules that apply to too many things. It's important that CSS developers understand the cascading and specificity well enough.
The error you are getting is logical, because the webpage and email template both having same style tag name such "body" tag is in both aspects.
You have 2 ways
1) do all in-line styling for email template (This is hard to do).
or
2)Change the style tag names of the email template both in html and CSS. (This is easy way to complete your task just add "email" before each style tag of your email template's html and css pages).
Then create a div tag in you web page with appropriate height and width as your email template and put your template into that.

Remove CSS style rules from a single HTML element programatically

I want to add some HTML elements in my document that has no style at all. But I need to assure that these elements will not look differently regardless of project, webpage or anything else really. These elements will be inserted in the page by Javascript and will be SPAN.
My idea is to add SPANs to style snippets of text in the document. But some style might have been added to SPAN elements before and that will change the result I am expecting.
So let's assume I'm writing a Widget and any of you could be using it in your own webpages. This is why I can't do much to change the elements' style directly, like changing the stylesheets directly. The solution must be achieved by Javascript. JQuery is not wanted.
<head>
<style>
span{
font-weight: bold;
/*anything else goes below*/
}
</style>
</head>
<body>
<span class='a_regular_span'>This text must be bold and anything else</span>
<span>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</span>
</body>
Any ideas?
So let's assume I'm writing a Widget and any of you could be using it
in your own webpages. This is why I can't do much to change the
elements' style directly
You could use a style element with scoped attribute. This way you can style only your elements, without affecting other parts of the page.
But be aware that old browsers don't support it.
And if you don't want page's styles to affect your elements, see How can I prevent CSS from affecting certain element?
If you really wish to separate the style of your elements from that of the other elements on the page, you could use a custom tag to do this.
For example, instead of using span, you could use customspan and style those elements any way you like.
<head>
<style>
span{
font-weight: bold;
/*anything else goes below*/
}
</style>
</head>
<body>
<span class='a_regular_span'>This text must be bold and anything else</span>
<customspan>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</customspan>
</body>
can u try this?
<style>
span{
font-weight: bold;
/*anything else goes below*/
} .a_regular_span span{ font-weight: normal;
/*anything else goes below*/
}
</style>

Prevent element from being manipulated with CSS

I'm currently building a small ad network, mainly intended to be used at our own websites.
The ads are loaded by including a script on the site, like...
<script src="http://someurl.com/somejs.js"></script>
Anywhere I place the script line, it's gets replaced with the ad content, inside a with inline styling.
Must ads will be HTML, and that's what troubles me...
For example, lets pretend that the ad content is something like
<div style="height: 150px; width: 90px; overflow: hidden; display: inline-block;"><p>Buy cheap buttons</p><p><img src="deliciousButtons.png" /></p></div>
And then lets pretend that the content is loaded into a webpage, where someone has the following in his stylesheet:
img { border: 1px solid red; }
Now the image in the ad gets a red border - bummer.
My only solution would be to use iframes... However, I've never really liked iframes.
Is there a html-element, where you can place HTML inside and everything placed inside is not susceptible to any stylesheet preferences - only inline styling?
... If no. Any suggestions on how to do it? With no iframes :)
You can override the inherited styles, but for it to work properly, you will need to everride every possible CSS option and probably mark such overrides as !important, really, iframes is the best way to accomplish that, another possibility is to use static images or flash, but i guess this is also out of the possible options.
You can do something like the following.
Add a class which you don't want the style.
<img src="deliciousButtons.png" class="no-border"/>
Then on your css.
img:not(.no-border) {
border: 1px solid red;
}
demo

Categories

Resources