Is it possible to remove the IE-specific behavior CSS property via a more specific rule or the !important declaration? Example:
.a-rule
{
behavior: url(/some.htc);
}
.a-rule.more-specific
{
behavior: /*no HTC*/
}
I realize that overriding CSS properties is undesirable, but I'm stuck here.
On Edit: I'm not sure where people are getting confused about this question. For all purposes, you can consider this already being an IE specific stylesheet. I'm asking how, if .a-rule above exists and is immutable, how can one remove the behavior via a more specific rule? A standard CSS equivalent would be:
.a-rule
{
border: 1px solid black;
}
.a-rule.more-specific
{
border: 0 none;
}
One can reset the border property for a subset of elements via a more specific rule. I'm asking how to reset the behavior property in an analogous way.
The default value is "none". See:
What is the *correct* way to unset the behavior property in CSS?
The solution:
.a-rule
{
behavior: url(/some.htc);
}
.a-rule.more-specific
{
behavior: none;
}
.a_rule {
border: 1px solid black; /* we know border is black */
behavior: url(/some.htc) /* we know something happen inside some.htc */
}
.a_rule.more-specific {
border: 0 none; /* we remove the border */
behavior: url(/some.htc) /* we remove something inside some.htc */
}
use different .htc file
Maybe use conditional tags for IE in your head
<!--[if IE]>
<style type="text/css">
.a-rule {
behavior: url(/some.htc);
}
</style>
<![endif]-->
Related
I am trying to set the background color to transparent for this page:
.page-id-714 .container-fluid {
background-color: transparent;
}
But I do not seem to be able to address the correct class or item. Can anyone point me in the right direction?
You are setting it on the wrong class. You need to set it on
.top-stripe {
/* Current, it's set to background-color: #fbfbfb; */
background-color: transparent;
}
Make sure you declare the above after the selector which I've shared below, else you need to make your selector more specific, or you need to use !important which I would not recommend, or better, you remove top-stripe from that declaration altogether.
Here's the declaration on your webpage..
Try this:
.top-stripe {
background-color: transparent!important;
}
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!
With jQuery one can rescind an earlier CSS setting by passing an empty string as the "setting."
E.g. After something like:
$('#foo').css('display', 'none');
...the expression:
$('#foo').css('display', '');
will essentially cancel the earlier setting.
Is there an analogous way to cancel an earlier setting in CSS?
For example, suppose I set some CSS property for an element X, how can I specify the unsetting of this same property in an X:hover directive?
Set the property to a default value (which may be "inherit"). This is probably more looking up what default values you're using, and organization, than you're asking for.
X { outline: 1px solid red; }
X:hover { outline: none; }
/* this is different than not setting { outline: 1px solid red; } on X:hover! */
Or you can not select X:hover when setting it in the first place.
X:not(:hover) { outline: 1px solid red; }
I am a newbie to CSS.Look at the pic:
http://i.stack.imgur.com/Y9X6K.jpg
Why img{border:2px,solid,red;} on the right is line-through,and in the browser the image hasn't border.
Anybody can tell me the reason?
Remove the commas because, your css statement is incorrect, hence the warning in the inspector:
img{border:2px solid red;}
A strike through a css rule in a developer tool such as in chrome means the rule is not being applied. In your case this is because your css is invalid there shouldn't be commas i.e
img { border:2px,solid,red; } /* invalid css */
img { border: solid 1px red; } /* valid css */
this expands to all shorthand css rules i.e
p { margin: 0 10px 0 10px; }
It can also mean it is being overridden somewhere else you can use !important at the end of a declaration to force the style i.e
img { background: red !important; }
Just remove those commas and make your css like this
img {
border:2px solid red;
}
multiple commas are used for define multi classes css.For more information check this link
I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw css?
It is possible, with CSS3 selectors:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
According to caniuse.com, every browser supports it now.
If all you're changing is the background colour, then the following would work, where test.gif is a 40px high image with the top 20px one colour, and the bottom 20 pixels the other colour. If you need to change any other css properties you're pretty much stuck.
table { background: url(test.gif) top; }
table tr { height: 20px; }
http://www.w3.org/Style/Examples/007/evenodd
CSS 3 nth-child. Since browser support is limited you can reproduce the behavior with Sizzle (included in, jquery for example)
(In CSS <= 2) Nope. Unfortunately there aren't any selectors (in CSS <= 2) that operate based on the position (in terms of the number it is within it's parent's children) which I believe you would need to do this with just CSS.
Note to self: read up on CSS3, already!
In http://www.w3.org/TR/css3-selectors/#structural-pseudos you can find explanation and examples on using nth-child:
tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
background-color: green;
}
tr:nth-child(odd) /* same */ {
background-color: green;
}
tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
background-color: pink;
}
tr:nth-child(even) /* same */ {
background-color: pink;
}
Good luck with browser compatibility - you'll need it.
There are hacks to make it work in IE (using JS) - I'll leave that sifting to you.