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)
Related
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).
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.
My understanding about CSS is that, generally if you set <div style="color: Red">, all content inside <div> will be affected. However if you put a html button inside, the color on the words on the button is not affected. I'm a bit disturbed by this exception. How do I give a reasonable explanation to it?
It's about users' expectations of the user interface.
Buttons (and other user interface widgets) prefer to look like their operating system counterparts. On Windows, users expect buttons to be grey with black text, so that's how browsers present them. It's intentional that you have to try quite hard to override that behaviour.
It's because it would be impractical for input elements to inherit style information from parent elements, this means whenever you style a form, you would have to create style rules for every type of input used in it, to make sure they don't turn out unexpected. you can however force inputs to inherit their parent's style with css:
input {
color: inherit;
}
That code will cause all input elements to inherit their parent's text color style.
The "cascading" part of "Cascading Style Sheets" (CSS) means that in general, you're right: a property set on an object will cascade down to objects below it.
However for some properties this doesn't make sense, so those properties are explicitly non-cascading (eg if you set a border on a div, you don't want all its children to have borders as well).
If we were dealing with raw XML in our DOM, that's where it would end. The colour would indeed cascade all the way down. However, we're dealing with HTML, and HTML has some pre-existing conditions, exceptions and overrides. For example, a <div> always defaults to display:block; whereas a <span> will default to display:inline;.
Buttons and input fields have a lot of defaults and overrides, which is why they show up as buttons and input fields without you having to do loads of styling on them. This is also why they override the cascading effect of certain CSS rules, including color.
You can override the override by specifying inherit for the overridden styles. So if you want you button to take the red colour you specified previously, you would do something like this:
.mybutton {
color:inherit;
}
You will want to look up the rules for inheritance in CSS; certain property values will cascade to certain descendant elements, and certain ones won't. In fact, one of the possible values for many CSS properties is inherit, which suggests that this value is not always the default.
The browser itself has default styles for input types, dependent on the OS it's running on. So for Windows, it will most likely be grey, for Apple OS' blue and round (fancy).
There are very easy ways to override this in CSS, I use it all the time in my websites, customising buttons and input fields to better match my site design with images and as mentioned before color values either inherited or changed.
Here is a nice article explaining the cascade and inheritance rules native to using CSS that might help you out.
:)
Buttons and some elements else come with their own style. This style is browser dependent. In different browsers the buttons can look a bit different.
I implement the Eric Meyer's reset.css in my website, and works great, but it was a little problem. As this a CMS users are free to format the content of their articles as they want and the reset CSS resets the formatting of their text.
Any ideas how we can prevent reset.css inheritance to propagate to the dynamic content?
All you input is more than welcome.
It will always propagate (that's kind of the point of reset.css :)), but if you're not already doing so, you should of course make sure that reset.css is the first stylesheet linked in your pages - any custom styles will then override the reset styles.
If the problem is that the styles are "too reset" and you'd like a more sensible set of defaults (e.g. weighted font sizes, margins, line-height etc.) for your dynamic content you could create your own baseline CSS styles and apply them only to the dynamic content area using an ID selector for example.
As Eric Meyer himself says on his CSS Reset page:
The reset styles given here are
intentionally very generic. There
isn't any default color or background
set for the body element, for example.
I don't particularly recommend that
you just use this in its unaltered
state in your own projects. It should
be tweaked, edited, extended, and
otherwise tuned to match your specific
reset baseline. Fill in your preferred
colors for the page, links, and so on.
In other words, this is a starting
point, not a self-contained black box
of no-touchiness.
By the looks of it, you're finding that the CSS Reset is doing a bit too much for you. I would therefore tweak it for the items you're experiencing problems with. For example, as you're experiencing problems with tables, I would either remove the parts of the CSS reset that target tables, thus leaving it at the browser default, or add extra CSS of your own after the reset to specifically style tables your own way.
I've had problems like that, my solution for that was to wrap the dynamic content generated by WYSIWYG editors, into a div with a unique class, where to that class I've created a reset style sheet with standard attributes!
Ex.:
div.wrap_to_prevent {style, style,
style}
div.wrap_to_prevent input,
div.wrap_to_prevent textarea,
div.wrap_to_prevent h1 {style, style,
style}
.
.
etc
Basically, I've used a reset style sheet, but preceded all css style's with the class of my div, that way, it just affects the code inside that div, thus creating a brand new set of rules for that content.
Since 90% of my projects use WYSIWYG editors, with this solution I was able to work around that same problem...
Can't tell if this works for you, but give it a try!!
Does the CMS create inline styles? If so these should override the styles from the reset.css file.
If the CMS includes it's own .css file, make sure that it appears after the reset.css file in your generated html output.
If you need to use the css reset, the only reliable way to work around this is to use an iframe element for the dynamic content. The main problem with iframe s is that they can't be automatically adjusted in height according to the inlying document's size. If you can work around that, I'd say this is the most hassle-free approach.