I am having a problem which I haven't run into before. I am working on a site http://recruitingprocessanalytics.redbranchmedia.com and when a user clicks to log in, it redirects to a subdomain http://app.recruitingprocessanalytics.com/. The subdomain is using the stylesheet from the main site. The problem is, it's ignoring some of the CSS rules, but not all of the them.
For example, look at the h1 "Demo" on the subdomain in developer tools. It's supposed to have a margin-top of 10px and I see it in developer tools, but it just isn't adding the margin.
margin-top and margin-bottom are only working on block elements, not on inline elements!
You changed the usual behavior of the heading elements to display: inline; in the common.css-file, which prevents the margin from being shown.
I guess the common.css file is not used on http://recruitingprocessanalytics.redbranchmedia.com.
Change the behaviour to display: block;, then the margins will be shown!
Try adding the margin-top: 10px inline in the HTML. Like so:
<h1 style="margin-top:10px">Title</h1>
The reason I suggest this is to see if the style gets applied. If it does, your problem is a problem of specificity, or something is over riding your CSS.
Check to see if the style sheets are linked in a different order. Or, if maybe you already have an inline style in your h1 tag?
If it were me trying to debug this, I would start with an inline style.
Hope this helps!
Related
My Problem:
We offer full customization for our site to our customers (so they can make out app look like the rest of there site). They provide us a HTML "surround" page, which our main app is rendered into (no iFrame, the HTML of our app is string.replaced() server side essentially). They can include any JS and CSS links to style this "surround" page.
The problem is, they often include their main CSS file for there full website (totally unnecessary, but easiest method to make there part look right), which includes lots of generic rules. Our app then obviously then obeys these rules, and it breaks a lot of our default styles. Specific example, they have a 'h3' rule which sets text-transform and font-family
h3 {
text-transform: uppercase;
font-family: 'Fjalla One',sans-serif;
}
In our own CSS, we set a the font-family of a class that is applied to the h3 tag, but not the text-transform property. As such, our CSS changes the font-family, but we inherit the text-transform.
Is there any way I can tell the browser to "start again" with applying CSS from a given element? I know its very un-Cascading, but I need the users CSS to stop cascading past our apps first element, and then apply our CSS to that element and its children. I hope i've explained myself clearly.
Option 1:
Give them a class like remove-all-styles
.remove-all-styles {
all: revert;
}
Then write your css code below this css code and make sure your css has higher priority than their css file.
What is the order of loading the CSS files in a HTML page?
Option 2:
Give initial or auto values to all elements in css then write your css code below
https://www.w3schools.com/cssref/css_default_values.asp
This is my form in html the blue one is the entire form and the orange one with red border is the excess margin of the form i wanted to remove this on i tried using
form{
margin:0;
padding:0;
}
This is approach is not the successful since the margin is still there. And the only way to remove this is excess margin is the margin of form.
Any idea is appreciated.
form{
margin:0px; padding:0px; display:inline;
}
My problem is solved after putting this css.
It looks like you're using Chrome. The orange indicates that it's margin (padding would be green). Using the developer console, you can inspect the element to see all the styles that are applied to it. You probably have another rule somewhere with a higher specificity that is taking precedence over your general form rule.
If you click on the item in the Elements tab of the developer console, the styles will be listed in the right-hand panel. You will probably see your style there with a strikethrough through it, indicating that another rule is taking precedence over it. Find the other rule and take the appropriate action (either override it with a higher specificity or modify the rule that's in place).
I would avoid using !important unless you're sure it's the right solution for this issue. By the sounds of it, it's definitely not the right solution. See here or just Google "CSS avoid important" for reasons why it's not a good idea to jump right to !important as a solution. One big reason is because that makes it difficult to override that style if you need to later on.
See here for an explanation of CSS specificity (including !important and some rules of thumb on when and when not to use it).
Okay, this is a gross oversimplification, but I have a javascript application to help people develop webpages. It has its interface superimposed over the page that is being developed, and it all works fine, apart from one thing.
If the div class used in the interface is used by the webpage that is being developed, the interface' embedded stylesheet overrides the properties of the webpage!
This happens on jsfiddle, the embedded css is takes precedence over the external css.
JSfIDDLE
external css:
.color {
color: green;
}
Index.html:
<style>
.color {
color: blue;
}
</style>
<div class="color"> Text to be coloured </div>
When run, the text is blue. If someone could make the text turn green, I think it would demonstrate how to overcome the problem.
Obviously, one way to fix this would be to change the interface classes and rules to something like this:
<style>
.color_interface {
color: blue;
}
</style>
<div class="color_interface"> Text to be coloured </div>
And make them unique, but the project has hundreds of css rules, and I'm just wondering if there's a better way, and a safer way (there's still a small chance someone has a rule "color_interface") to do nullify css rules, so they won't contaminate the page.
I'm thinking the only way to do it is probably a 'reset' stylesheet concerning my rules, setting them all back to their defaults. Is there a way to do this dynamically with jquery, maybe?
What you're witnessing is CSS by design. Specifically, specificity.
If your goal is to release some kind of library that can be used publicly and you want to avoid naming conflicts, I think a fair practice is to simply namespace your selectors, e.g., .starkers-color { color: blue; }. That won't necessarily avoid specificity issues, but it should prevent against having your selectors overridden by implementors.
If you inspect the JSFiddle page you'll see that the reason for it not working is that your inline style definition is placed in the body where it has no effect.
The CSS rules you specify is instead placed as an inline style in the head element.
To your problem:
Again, referring to JSFiddle, would it be possible to load the page in development inside an iframe? This would mean you get the separation you require.
This is because the order of the CSS when rendering. Your include is at the top of the page but your style tags are below that, meaning your style tags will alway take precedence over you include at the top. You could try adding an important to you css includes but this is majorly hacky and could create a whole load of new issues.
I'm trying to add some Social share buttons (facebook, twitter, etc.) to a blog without using a plugin, and am having an extremely hard time getting them to align vertically, and I know it's because the Wordpress styles are interfering because I was able to get the buttons to work on non-WP pages.
Is there some way to create a div that tells the browser "don't apply ANY styles to this div other than the ones I declare specifically for it, and if I don't declare any, don't apply any."
Give the div its own class, something like socialButtons and then start by removing the margin, padding, border, and float
div.socialButtons{
margin:0;
padding:0;
border:0;
float:none;
}
In most instances, that should be enough. If not, you can progressively remove other styles.
Make sure you place this at the bottom of your stylesheet so that your rules take precedence over other rules.
You should use firebug (an addon for firefox) which will tell you every style applied to the div. then use inline css to set every value to its default. to find default values use the w3schools tutorial and look at the different attribute's pages. if you dont want to use inline css, you can make a class or id at the bottom of your linked css file (make sure it is at the bottom so it taks precedent over other styles).
You can reset the styles for that div to their default by specifying every key and its default value, and then restyle it to your liking (kind of like how the reset.css works if you've heard of it)
I've difficulties to set up css rules of tags containing text inside li tag. Anything inside li becomes anormaly smaller. To make it readable, I need to make it bigger in an important scale (for instance, from .8em to 1.1 em). Unfortunately, the new text's size doesn't always match the one before it was put inside the anchor tag.
What I want is to be able to restore the previous settings as before I place the tag containing the text inside the li tag. Is there a trick to do that? Let's say, for font-size = 12px, do I need to make it, for instance, 15px to go back to 12px?
EDIT
Actually, a tag is not causing me trouble, but it's rather li tag which shrinks all the put inside. So, I've edited the above post by replacing all the a tag by li tag. I'm sorry for that. Anyway; while I thought I've run into an issue, after reading article suggested by S. Jones, I'm aware of the inheritence property on some tags.
Here's the issue. Let's say, I have
<a href = "somewhere">Somewhere<a>
a { font-size: 12px;}
After I put the above tag inside a li tag
<li><a href = "somewhere">Somewhere<a></li>
a { font-size: ???;}
After reading S. Jones article, I wonder if I need to disable inheritence or use IMPORTANT!!!
Thanks for helping
It sounds like you've got cascading and inheritance issues with your CSS.
You might want to look through the following:
Cascading Order and Inheritance in CSS
CSS Structure and Rules
There are several ways that you could fix your issue, but I can't say sure without seeing your CSS and HTML. If you could post some sample HTML along with your CSS file which illustrates your issue - several people here on SO will be able to recommend solutions.
Debug Recommendation: If you're not currently using it, you might want to look at installing the Firebug plugin for Firefox. It's a great tool for inspecting your page. You can highlight specific areas, and Firebug will show you which HTML elements and CSS classes are responsible for the layout.
UPDATE: Thanks, that's much more clear. Check your CSS file for any styling being applied to your list elements (li, ol, ul). You'll either need to remove some styling from these elements, or define font-size specifically for a elements nested within li.
For Example: li a {font-size:12px;} which will set the font size for a elements, only when they are nested within li elements.
Cheers.