I'm working with some CSS (from a Joomla template) like this:
div#logo {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: transparent url(../images/head.png) no-repeat scroll 0 0;
...
}
I've looked up some of those -moz- properties and they seem to be assigned their default values, and if I turn them off in Firebug nothing happens visibly.
Would there be a reason to add them to a CSS file? Are they for an old version of Firefox perhaps?
I think what's happened is someone's set a background shortcut rule and then looked at the ‘computed style’ resulting from that shortcut rule in the DOM inspector. They've noticed that setting the style also sets Mozilla's background-clip, -origin and -inline-policy properties, and tried to reproduce these rules without understanding what they're for (namely a detail of Mozilla's CSS implementation, and potentially CSS3 in future).
Certainly changing -moz-background-inline-policy would only have any effect on elements that were display: inline (which div isn't by default), and changing the clip/origin properties around the border would only make any difference if the element actually had a border.
Get rid of them.
Chances are good that these properties don't need to be there. I'd suspect that they're included to ensure consistent rendering across different versions of Firefox. I guess the answer is, if you're seeing no difference from disabling them in the versions of Firefox you're interested in supporting, take them out.
background-clip isn't supported on current Firefox builds AFAIK, so the author has probably put them in preempting a problem (though that would be odd as they are all set to the default anyway, and they haven't included the opera or webkit prefixes...)
background-inline-policy is default as continuous in all Firefoxes, and background-origin is default as padding in them all too.
I'd say pointless code for this one.
If I turn them off in Firebug nothing happens visibly.
I'm not sure on those particular attributes, but have you checked that the browser isn't using a cached style sheet?
Related
For some reason, a ::selection declaration in my CSS simply is not working, it is always behaving as per the default (light blue background on Chrome, Mac).
The code works fine in a jsbin
::selection {
background: red;
}
Thus my assumption is something is being overridden somewhere in the project, but I can't find another declaration of ::selection anywhere in the stylesheet. I was wondering if there is any way to see this in the Developer Tools to try to pinpoint or debug why it isn't working in my project?
Even giving the CSS an !important declaration isn't helping.
edit
OK, I tried debugging further by adding:
<style type="text/css">
::selection, ::-moz-selection {
background: red !important;
}
</style>
to the footer of the document, and thus it turns out that one cannot combine these two declarations in one statement, which was mentioned by Chris Coyier in this comment:
I have a question: Why can´t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.
That’s a good CSS lesson! When a browser doesn’t understand any part of a selector, it ignores
the whole selector (even if they are comma separated). There are some
exceptions but mostly in old browsers (IE 7?).
So all is well and working again, but the question still stands I suppose, is there a way to see this declaration in the devtools somehow?
edit 2
Ok, of course, when the declaration sits on its own line, then it appears in the inspector.
edit 3
A very relevant SO question: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
I'm just surprised Chrome doesn't just still show the malformed declaration in the inspector rather than hiding it completely.
Try to check via inspect element.
Right click on web page
Select "inspect" option
In inspect element panel, there will be style appear in right hand side.
You will find your :selection declaration in it.
I'm doing som cross browser fixes for IE8 and I came across something I've never seen before. Is there someone who have seen this crazy shadows before? and is there someone who knows what possibly is causing this?
I'm attaching two screenshots, one from IE8 and one from Chrome.
IE8 - http://cl.ly/image/1u0t0A2D0p0l
Chrome - http://cl.ly/image/411L1B0Y2X3Y
Thanks for any kind of help!
View HTML and CSS here: http://marcusfriberg.com/skillbird/stof.html
This problem is not only happening in IE8 but also in IE9. When I checked through Developer tool, It is clearly showing that it is happening because of the property filter which is given in the post-top and stats-type classes. I suggest you to go with conditional css to overcome this problem. Have a look at this link(community additions too) for clear understanding about the behaviour of filter in IE browsers.
EDIT:
And also in MDN, The filter property is not documented for IE browsers. Check compatibility section. It also stated that
Older versions (4.0 through 9.0) of the Windows Internet Explorer browser supported a non-standard "filter" that has since been deprecated.
The other filter property which is compatible with IE Browsers can be found at this link (not for IE9).
IE8 does not support text-shadow in CSS, which is what Chrome and IE appear to be using here.
http://caniuse.com/css-textshadow
If this is code you inherited, then it is quite likely that someone tried to use an alternative method for IE which went horribly wrong.
There are a number of fallback ideas for IE, but one popular one is to use 'IE Filters'.
Sometimes these propriety IE filters can achieve similar effects as the standard CSS, but at other times, they need fine-tuning.
You might want to scan your CSS file for the use of filters and make adjustments as needed. Code would look something similar to:
#element {
filter: alpha(opacity=70); /* the opacity won't work! */
filter: glow(color=black,strength=5);
}
See this article for more:
http://www.impressivewebs.com/css3-text-shadow-ie/
To achieve a better effect of text-shadow in IE, I use CSS Pie. It's amazing. Check it out here:
http://css3pie.com/
And it's even being used right now on one of my client's website: http://www.tokheim.com
Hope that helps.
As of this website:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
"The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow."
It means your filter value for Y axis is too big.
I'm using the CSS3Pie htc file to enable border-radius in IE8, but I'm getting no effect. My CSS is:
button {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
behavior: url(PIE.htc);
}
I've put PIE.htc in the public root (as is done on the CSS3PIE demo page), having tried in the same folder, using a relative uri and an absolute uri.
The demos are working; just not my code!
Thanks, Adam
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here:
CSS3 PIE - Giving IE border-radius support not working?
The URL of PIE.htc as referenced in behavior: url(PIE.htc); is a relative URL, so it is probably looking for it in the same directory as the stylesheet, so I'd suggest adding a slash to make it an absolute URL. But you say you've already done that.
Check that the URL you're specifying does actually load the PIE.htc file - ie put that URL directly into your browswer and see what comes out. It is possible that your web server is not serving it correctly for one reason or another (not recognising the mime type? etc)
Have you gone through the known problems on the PIE site? Have you added position:relative; to your style? Could it be the known z-index issue?
You specify that it doesn't work in IE8. Have you tried it in IE7? IE6? Same result? (this will eliminate ths possibility of it being an IE8-specific issue)
By the way -- unrelated point, but you should put the border-radius style below the versions with the browser-specific prefixes. This is the standard way to do things, as it means that when for example, Firefox starts supporting border-radius, it'll pick up the standard style over -moz-border-radius. If you've got the -moz version below it, that one will continue getting used, which may not be what you want.
As Daniel Rehner stated, you need to use the position: relative and z-index properties for IE8. If you are using a website with sub directories to call the CSS file, you will also need to use an absolute path in your CSS to PIE.htc - this was one part of our issue.
The other part of the issue could be that your server is not outputting the PIE.htc file as text/x-component. You can correct that via IIS or Apache, or call the PIE.php script in your CSS. More info here: http://css3pie.com/documentation/known-issues/#content-type
Both of these issues had gotten us, and hope they help you out.
I actually had this problem for a completely different reason.
The border-radius will not work if a filter is applied to the same element. I was applying the border-radius to a button with a linear gradient applied as a filter. As soon as I removed the filter the border-radius worked.
This is documented behaviour and gradients should be applied using -pie-background:
http://css3pie.com/documentation/supported-css3-features/#gradients
behavior: url(PIE.htc);
Make sure there is no space between the url and ( as this stopts it from working at all in IE8
Just in case anyone is trying to apply this to table cells, you'll need to apply position: relative to the table element (and not the tdor th, even though those are the elements being rounded).
Chrome appends an stylesheet and it make a lot of problems for me. for example this selector
html>body, html>body * {background-color:#ffffff !important}
is one oe the things I can't override in my own styles. Anyone has a solution for that?
Though all browsers have a default stylesheet for elements, none of them set the background color as !important which wouldn't allow you to change it. What you show must be getting attached from elsewhere, not Chrome, but, without a link or the complete markup, anything we tell you would just be a wild guess.
I am using a few CSS tricks to boost up the usability/appearance of my site in Webkit browsers. The two main ones are text-shadow and resize:none (on textareas - to stop that annoying page-breaking resize option in Safari and others).
The problem is that when I run my page through the W3 validator I get tons of:
Property text-shadow doesn't exist in CSS level 2.1 but exists in : #feb4b4 1px 1px 0 #feb4b4 1px 1px 0
-and-
Property resize doesn't exist in CSS level 2.1 but exists in : none none
Is this really not valid? Should I really not use this, or is it an error to just ignore?
The text-shadow property is a CSS3 property. If you pick CSS Level 3 from the advanced options on the W3 CSS Validtor service, it should come through okay. It was also in CSS Level 2, but dropped for CSS Level 2.1.
Both text-shadow and resize are only valid properties in CSS 3, they were only implemented in previous versions of CSS by the browsers but were never officially supported. If you want to use them, you really should use CSS 3 instead.
I would use the proprietary browser equivs of the prpoerties in question like -webkit-text-shadow and -webkit-resize i think that will allow the css to validate while still letting you use the properties (even on level 2).
The down side is you have to mimic this for Mozilla as well like -moz-text-shadow if you want to use it there... and assuming IE eventually starts to support these then you might go back and clean it up replacing them all with the single property declaration in the spec.