We are dealing with browser compatability issue for IE8. Borders for text box does not appear to be in blue. We are using attribute selector
input[type="text"]
{
border: solid 1px #7F9DB9;
}
Which is applied only to IE8 And not IE6.
However the problem is some text box already has border defined in it. Which are being overwritten. I tried using expression but it seems to work only when DocType is not present.
The other option left for us is to make each of the textbox classes in css for border with !important, Which is very tedious indeed for the big project.
Second solution is to use jquery which mgmt is aganist.
Can any one guide as how to target this.
Are you sure you've defined property at the appropriate level, and not again somewhere that would override it?
IE6 does not support attribute selectors, you will have to target it another way. I would suggest adding a CSS class -- the default styles are going to be different in every browser.
You could also try being more specific, as littlefoot mentioned. Try adding more of the cascade to reference that element and you might be able to override it. Avoid using !important wherever possible.
Related
I just can ignore this property and I will get the same result, right?
If so, what is the meaning of using text-decoration: none; as a declaration in CSS.
This is my first question.
I'm trying to understand CSS and it's declaration's properties.
If the element you are applying the CSS to has no default text-decoration, then yes there is no immediate functional benefit to applying that CSS rule.
However, consider you are using the <a> HTML element (or anchor element). This has the default CSS style:
text-decoration: underline;
You may want to remove this underline (for whatever reason). This is a scenario when you could use the style rule a {text-decoration: none;}, to remove the underline.
CSS libraries like Bootstrap may also apply unwanted CSS rules that you wish to remove, or maybe you are already applying a CSS rule to an element, but want to remove that styling in specific cases.
You might also apply CSS rules of this nature as a preventative measure, to mitigate the risk of future CSS changes applying rules where you may not want them to.
In short, you use CSS rules like text-decoration: none; to remove existing CSS rules.
The MDN web docs is a great source to learn about CSS, and the other fundamental technologies of the web, If you want to learn more. Here is a link to their page on the text-decoration CSS rule.
Hope this helps.
One example of things affected by the none would be <a>/href=””links, that to most browsers, become blue once turned into links. using text-decoration: none; shows the browser that it should not add anything extra to the text, thus keeping it consistent with the other type on your page.
For more examples and documentation on the style, read MDN Docs on text-decoration
I'm using a CSS theme that I'm not allowed to edit, I need a way to paint all the white backgroud-color with something less shiny.
I'm new to CSS, what should I do to override the background-color for all classes using CSS?
Here is a screen shot, I'm using Primefaces to generate the web content hence I'm unable to change the provided CSS
A screen shot of what I'm trying to change
I already understand that every element has it's own class in the theme, but I don't know their names, nor which one of these classes provide the background-color for those elements, what I'm looking for is a simple way to repaint the white color in the whole page.
From the official documentation:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
And also:
Specificity is based on the matching rules which are composed of CSS selectors of different sorts.
That means that the CSS would be applied depending of your browser and your CSS Selectors for that browser.
And you should also look at what CSS Selectors has a higher specificity.
But as you want to override the background-color, that means to get the higher CSS Selector specificity I think what you are looking for is the !important exception.
Again from the documentation:
this declaration overrides any other declarations.
that means that the property of CSS that you are going to set with !important exception will be applied overriding the rest of different configurations that has that property.
But also, you have to care about to abuse of that property:
Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
What I recommend:
Try to set your background-color with CSS Selectors with higher specificity.
If you cannot modify the property, and you have tried all the posibilities, then use !important exception.
You can paste this into the bottom of your page right before the tag.
<script>
document.body.style.backgroundColor = "#883377";
</script>
You can the change the #883377 to whatever color you would like.
I'm trying to determine the style of a div by going by what is in it. If the content is '0', it should have color: red, and if not, fall back to the usual color.
I've found there used to be :contains(value), but that doesn't exist anymore. Is there any replacement I can use for this in css?
Thanks in advance.
No, there isn't. If CSS was going to have a content selector, it would have kept :contains().
For what it's worth, jQuery implements :contains(), so if you're using it already you can apply styles with it instead.
Is there any way to override !important properties defined in browser's CSS code other than using per-element style? It seems that the browsers load their precompiled CSS after page's CSS defined in style or link tag. I want to remove borders and colors from default checkboxes and radiobuttons (appearance is not important so it can be easily disabled), my CSS works in userstyles, but on real web pages it doesn't work.
Any page (author) style sheet overrides a browser’s default stylesheet. There is no !important in browser stylesheets. Specificity does not matter here, by the rules of the cascade. What matters is that some presentational features are not controllable in CSS in the first place. Demo:
<!doctype html>
<style>
* { border: none; }
</style>
<input value=foo><br>
<input type=checkbox checked>
This removes the default border of the text input box. On most browsers, it does not affect checkbox rendering, since what we might see as border there is really part of the checkbox widget. IE, as usual, has different behavior, but even on it, you cannot remove the “border,” and if you use your own border on the element, the border is drawn outside the box.
There might be browser-specific ways of affecting their behavior in ways other than standard CSS. You may need to elaborate on what works “in userstyles” and on which browser(s).
So you wanto to "remove" browser default CSS?
I think you can do that with reset CSS, it basicaly resets the browsers styling.
There's many examples out there
Heres one: CSS reset
Yes. Use Javascript to remove the styles from the elements after loading.
Or, design the stylesheet right at first.
What I know is : external css, internal css and inline css. And its overridden order is :
external < internal < inline.
i.e. external css is overridden by internal and, internal and external is overridden by inline.
Also, we can update it through javascript.
Declare your styles, using selectors that are at least as specific as the original selectors.
Mark your overriding styles with !important
Declare/include your stylesheet after the existing styles
Here's an example, where the last !important styles declared take priority over earlier styles.
http://jsfiddle.net/8QHQk/1/
As usual I developed it in Firefox. Usually it works without modification in Chrome/Safari, and also IE8.
But when I tested on Chrome and Safari, I was surprised to see that it does not work.
My CSS is valid (validated on w3c). The JavaScript (using jQuery) seems to be valid too.
The affected elements are not redrawn after an attribute value is modified through jQuery, so the CSS rules for the new attribute value are not applied, not until I go into the Chrome inspector and deselect/select them manually...
Update: I do not have a working link for this problem anymore.
The problem was that Webkit was not "redrawing" when attributes were changed, but only when classes where changed, so CSS blocks with selectors such as div[attr=value] would not apply when attribute attr was changed to value through JavaScript.
One workaround is to use classes instead of attributes (.className) in selectors. Performing a class change after changing an attribute would also trigger a redraw also fix the problem.
This post is more than 5 years old, I believe the problem has been fixed in Chrome now.
The issues seems to come from the fact you are using attributes (selected attribute on DIVs) to control the state of your images; it seems like the webkit engine doesn't update the graphics until something actually changes - like a class or a style property.
In general, you should know that using a custom attribute like that isn't best practice. You can use a class to indicate when it's on, and .addClass("selected"),.removeClass("selected") when needed.
Also, you can display the images as background image of an element and control it directly from CSS, with:
.item div.caption { background-image: url('bras/B/btn.png'); }
.item.selected div.caption { background-image: url('bras/B/btn_selected.png'); }
this will simply change the image according to the div.item selected class.
For a simple work-around, you could add at the bottom of your .click handler something like $("body").toggleClass("somethingrandom");, but I really recommend to change your code to work with CSS, background-images and classes.
Do you need to modify the attribute value only? Could quite easily add a 'selected' class to the <div class="item" /> instead/as well. Using this alone/as well as your attribute targeted css will automatically update the images display.
Have you opened the error console within Safari yet?
In mine, I'm getting 404 errors on two files...
/bras/bras/A/3/2/1/bra.png
and
/bras/bras/A/1/pink/3/bra.png
EDIT:
You also have a </head> tag at the very end of your document instead of a </html> tag.