li and ul are already defined throughout the website and i have a gallery page that i use a nextgen gallery plugin.
However there is a collision with the li style and nextgen li style i guess,
web page global css li is overriding the gallery's li and putting check box next to it, in which other pages are done like this.
How can i reset this only for this block of gallery? possibly place in a div?
Thanks.
You need to determine the specificity of your selector and change it accordingly.
Alternatively, open the gallery's CSS and add !important.
If !important isn't working then it sounds like you need to work out the most specific rule that is giving it the unwanted style.
Use Firebug in Firefox. You can see the most specific rules, disable them, and edit them.
you can try adding the second stylesheet after the global stylesheet, that way the second one will override the first
Related
This is for a class project I have finished, but we can get bonus points for doing extras. I removed the underline in my hyperlink, and I was wondering if there was a way to put the underine back on a mouseover? I'm also not allowed to use CSS or anything other than HTML. I don't know if it is possible, but here is what I have:
<a href="http://www.tolkien.co.uk/index.html" style="text-decoration:none">J.R.R. Tolkien
This is the best I could come up with. What I will say though is that you are technically using CSS with the style, onmouseover, and onmouseout events, it is just doing so without the need of a CSS file because the style event is just making html understand it itself. The style event is then on the other two events, giving them the power to use CSS with only the html file.
J.R.R. Tolkien
You can't do this without Css, if you want to try it's :
a:hover{ text-decoration: underline;}
HTML has no mechanism to remove the underline from a link containing text.
The text-decoration: none syntax you are using is CSS. The style attribute takes the body of a CSS rule-set as its value.
The only ways to apply CSS dynamically based on if the mouse is pointing to something are with a separate stylesheet (where you can use selectors, including rulesets) or with JavaScript (where you can modify the CSS based on events).
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!
Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.
I am currently restyling a website, but part of the site takes a string from the CMS and puts it into a description area. The description often has its on HTML, such as bullet points.
The problem is the designs we received also use bullet points to style certain aspects, which make everything within this description area styled entirely incorrectly (tiny width for ULs, background applied to H2, etc).
Is there any kind of tag that will reset the styling of everything within it?
Thanks in advance.
Edit: I've gone for this solution, which works when I apply the class 'CMSReset'. It resets the main offenders, thanks for the help:
div.CMSReset, div.CMSReset *
{
margin:0pt !important;
padding:0pt !important;
vertical-align:baseline !important;
width:auto !important;
background:none;
color:inherit;
}
short and simple: no, you'll have to reset the stylings taht need to be reseted on your own.
a workaround would be to use an iframe wich would prevent the inner content against inherited styles, but that solution is even worse in my opinion.
this other topics might also be interesting for you:
reset multiple css styles for one single div element
how to not inherit? or how to reset inherited width to the value before? (css)
Generally, people override CSS Styles in 2 ways:
1) They define an inline style on the attribute itself so:
<div style="background-color:#FFFFFF"></div>
Would override any other style.
You can also apply a style via an id (#IdName) which will have precedence
2) They redefine the style at that level of the document. You can use the !important css modifier (but this isn't universally supported).
If you've blanket applied styles, like div or body > div then these can be difficult to override and often require restructuring, or rethinking, your styles and classes.
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)