li.disabled a {color : #808080;}
I've added the above in .css file and my expectation is to find any <li> tag with class as disabled and make the corresponding content given in ??? this tag to be displayed as gray in colour.
Example of my html would be http://pastebin.com/cnA4gqb3
This does not seem to work on browser like chrome. Can you suggest me a generic css which will work in common across all browsers?
This is probably a "importancy" issue. Some other CSS is likely to be more important to Chrome. Try adding !important or change the order of your rules.
You can use something like this :
This is used for safari and chrome basically,
`#media screen and (-webkit-min-device-pixel-ratio:0) { #u { color:green; /* Safari only */ } }
Related
Bit of a confusing one, the color attribute is respected on the desktop version of Safari but not on mobile.
I tested it on an iPhone 5 (iOS version 9.2.1).
Sample code (first span will appear black on safari mobile):
<html>
<head>
<style>
span { color: white; }
</style>
</head>
<body>
<span>✖</span>
<span>×</span>
<span>×</span>
</body>
</html>
and JSFiddle link: https://jsfiddle.net/9t3v8846/
Adding !important didn't do anything. Any ideas what might be causing this?
If any poor people come across this.. the way to fix this is to add a variation selector after the entity like so:
<span>✖︎</span>
Essentially what is going on under the covers is that the browser decides how to render the HTML entities.
Safari on iOS prefers to use Emoji-like rendering where possible so it ignores the CSS attribute. The variation selector used above specifies that we want to use text-like rendering causing Safari to now respect any color attributes applied to it.
If you are using less try this
#baseColor: #ffffff;
body {
color: rgba(red(#baseColor), green(#baseColor), blue(#baseColor), 1);
color:#baseColor
}
The input browse button should come as with space on IE11 as it comes in IE8.
See the below images so that you can have a clear idea on my issue.
On IE11, it is coming like this, i mean this is wrong.
On IE8, it is coming like this, i mean this is right.
So, i need the same button should come with space in IE 11, Any help?
Every browser uses its own styling for <input type="file"/> and it's usually better to just accept that and use the default as there is no standard-compliant solution for styling the upload button (at the moment).
However, if you insist on adding the space, you can use the non-standard ::-ms-browse selector for targetting the Browse button on the latest IEs.
For example:
::-ms-browse {
margin-left: 5px;
}
(You can use ::-ms-value for styling the input field part.)
Please have a look at this question: How to remove default file input style on IE10?
You can't achive changes in IE10 and greater with conditional comments because they were deleted in 10 and 11.
The new workaround is with media queries in css:
Use:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
input (or whatever your selector is) {
/* your css here */
}
}
For further information regarding css-hacks for IE10 and greater: http://www.impressivewebs.com/ie10-css-hacks/
Its a default browser property so we can't do this
Im trying to learn how to enable print background-colors pages in chrome :
Take for example http://angularjs.org/
the main page is :
So If I click print ( ctrl+P) and mark the "background colors and images" - it does show the background colors which are future to be print :
All ok.
But If I navigate to another page http://docs.angularjs.org/tutorial/step_02 which also have background colors in it :
And when I try to print it - I see it in the preview pane without colors :
My question is : how did they do that ? ( or better , how can I make it print background colors ?)
I already read here that I should use -webkit-print-color-adjust:exact;
so I added it to the html via chrome developer toolbar , but it didn't help. ( when I clicked ctrl+p again
What should I change in the css in order for it to print also background colors ?
related info , searching for #media , found it under :
But I didn't find any related info there.
Ok, I think you didn't got what I meant in the comments, anyways, so it's pretty simple, say am having an element, like
<div class="blow"></div>
With a background set to tomato, so inorder to make that work, first of all you have to be sure that you have media print set, like
#media print {
/* Declarations go here */
}
OR
<link rel="stylesheet" href="style.css" media="print" />
Now, what you have to declare is
-webkit-print-color-adjust: exact; in the property block, like
#media print, screen { /* Using for the screen as well */
.blow {
height: 100px;
width: 100px;
background: tomato;
-webkit-print-color-adjust: exact;
}
}
Demo (Only for webkit browsers i.e Chrome/Safari)
In the above demo, you should be able to see the red block, even in the print preview window of your Chrome.
As you have commented, it works for me..
OR
Support for the same is dirty, for more information on the property, you can refer MDN
From MDN :
Body element backgrounds are not printed Currently neither
Chrome nor Safari print backgrounds of the body element. If this
property is set to exact for the body element, it will apply only to
its descendants.
Chrome clipped image bug
When background images are clipped (for example, when using
background-image sprites), due to Chromium bug 131054, they will
appear distorted when printed from the Chrome browser with
-webkit-print-color-adjust: exact. Solid backgrounds and background images that are not clipped (i.e. have lower width and height than the
element to which they are applied) are printed correctly.
External links
WebKit bug 64583: "WIP: Add CSS property to control printing of backgrounds for individual elements"
CSSWG wiki: "print-background" - a proposal to standardize this
property
Your background-color is probably overwritten. To achieve background-color for printing increase the specificity of your selector or add !important to the statement. Along with -webkit-print-color-adjust: exact; this should work for you:
#media print {
.mycontainer {
background-color: #000 !important;
-webkit-print-color-adjust: exact;
}
}
1.I have the following class in CSS file
.dashboard-area {
width:1200px;
}
I havethe above code / css class wil be included in IE8 browser instead of all browsers. I do not need to give this as separte CSS and makes the thing like. how can I give conditon in CSS code itself to execute in IE browser only.
IE8 css selector
2.border - radius not working in IE8 browser but working in all other higher version of IE.
how can I implemeent "border-radius" to work in all browsers of IE (7,8,9).
Thanks,
You shouldn't do this but you can target IE8 with this:
#media all\0 {
.someSelector {
color: brown;
}
}
Or
.someSelector {
left: -8px\0;
}
IE8 doesn't support border-radius http://caniuse.com/#feat=border-radius but you could use a polyfill like css3pie to achieve it.
Regardless I recommend you to use conditional comments
So i have some html:
<a class='clicktext'>...read more!</a>
and i want to give it a :hover animation, as so:
.clicktext{
}
.clicktext:hover{
text-decoration:underline;
}
.clicktext:active{
text-decoration:none;
}
Suffice to say, it does not work in Mozilla Firefox 5, even though it works perfectly well in Chrome and Safari. However, if i change it to
a{
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:none;
}
It works perfectly fine in Mozilla Firefox 5! I have not managed to find anything regarding this online.
I could, of course, just change my styles to apply to the a rather than the .clicktext. The problem with that is that it would screw up my conventions, which is (as far as possible) apply all the styles to classes rather than to the tag names. After all, I have many other tags for which i do not want this underline-on-hover thing to appear.
Has anyone bumped into this, and perhaps found a nice solution?
edit: these also do not work
.clicktext a:hover{...}
a .clicktext:hover{...}
I had these kind of problems with Firefox and solved it by adding the tag name to class name:
for example I had this which worked in Chrome but not in Firefox:
.content .sidebar:hover{
background-color: red;
}
and fixed it by making it more specific like this:
div.content div.sidebar:hover{
background-color: red;
}
http://jsfiddle.net/rE8xU/
I do not see the issue, when moused over it does include an underline.
A possible cause of this issue is the level of importance that the class has.
Such as styles that are set by their identification tag will take over any class styles and so forth.
http://htmlhelp.com/reference/css/structure.html
check out cascading order
Lastly, make sure that the css file is properly linked and or embedded
you can use firefox to check as well.
You need to add href="#" to your . the :hover meta tag needs the link to have the href property set.
use <p></p> tag if you are not hyperlinking the text.
<p class='clicktext'>...read more!</p>
then for styling the text.
p.clicktext {
color: #ccc;
}
p.clicktext:hover {
text-decoration:underline;
}
Hope i Helped ;)
There's a big chance that you have a conflict somewhere in your CSS, because the jsfiddle with this exact code works fine in Firefox 5. You might want to check for ID-selectors with the hover-pseudoclass that could possibly overrule this line of styling. Inspect it with firebug to see what css is inherited.
You might be getting this problem for
1: not specifying the class which is clicktext in your case, or.
2: object a is associated with some other class not compatible with clicktext class!
I am saying this because my website
is running perfectly without any problem, in both Chrome and Firefox!
I am using hover to produce an overlay effect! This is what I am doing:
.container{
//your specifications
}
.image{
//your specifications
}
.text{
//your specifications
}
.container:hover .text{
//your specifications
}
I also think that the answer marked as "correct answer" is not correct.
I had same problem, was just not working on Firefox, quick close and restart app and was working again.
Daniel