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.
Related
What is the use of this CSS hack in Safari?
/* CSS Hack Safari */
#dummy {;# }
I found it in this page:
http://jscroller2.markusbordihn.de/example/endless/
After doing some Googling, I was able to find something pertaining to Safari and browser hacks..
Apparently, older versions of Safari would ignore CSS declarations that were preceded by a hashtags. For instance:
h1 {
font-size:24px;
font-size:30px;#
}
If Safari were to come across something similar to this, it would make h1 24px, and completely ignore the 30px.. However, say IE, or Chrome were to see this, they would read the declaration and make the fontsize 30px because of the fact that they don't take the hashtag into consideration. To my knowledge this little 'hack' no longer works on newer versions of Safari.. Here is my reference.
Now back to the question:
#dummy {;#}
This doesn't particularly do anything, so I don't really see why this was in their code.
However, I am assuming that something was originally placed in there, and later removed due to the fact that this hack no longer works..
This is a rather interesting source on browser hacks..
today I hit F12 in FF to load FireBug to see what my site was thinking. Then saw this:
The facts showing from above:
My site likes using them "rounded", alot of them...;
My site is loaded with errors, at least as FireBug sees it.
Is FireFox right and should I assess this and if so how do I change it since I think this is crucial for IE and is the default CSS3 spec, right? Or is there something else happening thats causing all this things to show up in FireBug? I would be happy to hear what I should do to make all this disappear again, really.
Open the drop down in your console tab and un-tick stuff like "show CSS errors".
Also, it's not a bad thing. If Firefox comes across a property it doesn't know (such as border-radius at the time this question was asked) it will just ignore it and continue with the next property. This is why for instance -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; works. Firefox will ignore the -webkit- prefixed one, it would recognize the -moz- prefixed one and ignore the non-prefixed one because the non-prefixed one had not yet been implemented in the version of Firefox you used. (It is now no longer needed to prefix border-radius unless you're supporting an ancient browser)
You might want to pop the IE-specific properties (filter and zoom) into an IE-specific stylesheet, and include that with conditional comments.
As for the rest, you’ve just got an older version of Firefox that doesn’t recognise the newer properties. That’s fine, it won’t do any harm. (Somewhat odd that moz-opacity isn’t recognised, as I thought that had been around for ages, but it’s fine.)
Check this
I think you need to use -moz-border-radius:... declarations for FireFox :)
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?
Does IE have anything similar to what -moz-border-radius does in firefox/chrome?
Also is the -moz-border-radius supported by safari?
IE doesn't support the border radius CSS3 or custom implementations. Your best bet is to use something like jQuery and a rounded corners plug in (see below) to accomplish it.
http://plugins.jquery.com/project/corners
Here's a 2nd plug in that I use more often than the above:
http://www.methvin.com/jquery/jq-corner-demo.html
EDIT:
As for safari, yes it has a custom implementation like mozilla.
-moz-border-radius: 5px; /* mozilla */
-webkit-border-radius: 5px; /* safari */
I tried corners last week, and it was broken in a number of browsers, most notably IE8. I'd avoid if possible.
You should design your design so that it looks and works ok in IE, and if opened in one of the newer browsers little things like rounded corners would just make your site look that much better. Things like that will eventually cause users to move to newer browsers, when the experience is better in one and not the other.
The CSS3 Specifications are in the main browsers partly implemented and you get very nice results with less code, but there are many reasons not to use CSS3. E.g. not downwardly compatible, probably not similar renderd views on different browsers, etc.
So I'm asking myself: Which is the best way to use CSS3 anyway with a option to intercept default problems, like I've discribed above?
As long as your site degrades gracefully there's nothing wrong with using CSS3 now. Afterall, if a browser does not understand a particular CSS rule it will just ignore it:
#foo {
border:1px solid #000; /* shown by all browsers */
border-radius:5px; /* shown if browser understands border-radius */
-moz-border-radius:5px; /* Firefox only */
-webkit-border-radius:5px; /* Safari and Google Chrome */
}
As long as the site does not look broken in browsers that don't support the CSS3 rules you want to use then you should be ok progressively enhancing your site in the browsers that do support them.
You might find "When can I use..." useful for seeing what features you can reasonably use.
If your making a public website then you have to support ie6, which means no css 2.1, let alone 3.
One thing you can try is: lesscss
This will let you use shorthand css notation and "compile" it to valid css on build.