I'm using <meta http-equiv="X-UA-Compatible" content="IE=8"> to make IE9 render as IE8. This has fixed a lot of my issues, however because IE8 doesn't have support for box-shadow I was forced to use filter: progid:DXImageTransform.Microsoft.Shadow(color='#333333', Direction=145, Strength=5); to get a similar effect to my shadow. Now, IE9 does have support for box-shadow however i can't get IE9 to use box-shadow instead of the filter.
Does anyone know how to get IE9 to render the shadow?
You can't make IE9 use its native box-shadow if it's in IE8 mode.
You can:
Just use IE9 mode and fix your page to work in it - this is what I'd do.
Use CSS3 PIE - it can simulate box-shadow in IE6-8.
Why are you forcing it to render as IE8 then expecting it to render as IE9? :) IE8 didn't have box-shadow support, so IE9 dutifully disables it when it's rendering as IE8.
If you want IE9 to render the box-shadow you'll have to set it back to rendering as IE9 or EDGE. If you are forced to maintain the x-ua-compatible as it is, then you'll have to use filters.
Note there's different syntax for IE8...
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
(example grabbed from http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/)
Because these are pretty nasty ideally I'd suggest you isolate them in an IE-only stylesheet delivered with conditional comments.
Related
I have switched from IE8 to IE11, but still I am not able to use CSS3 properties. IE11 not recognising the CSS3 specific porperties like border-radius and box-shadow.
In the developer tools they are without a check box and are red underlined.
A possible reason which I have found is that the doctype html is always commented out and I assume that because of that IE is not recognising the properties.
Try this website: http://caniuse.com/
It will show a guide as to what CSS and general web design rules work with which browsers with and without plugin support.
Border radius: http://caniuse.com/#feat=border-radius
Boxshadow : http://caniuse.com/#feat=css-boxshadow
The graphs output on these links show that both these CSS rules work in IE above IE8.
Need to make some kind of 'scheme'. It was working fine in Google Chrome but I hear now that it needs to work in IE, IE only.
Is there some way to fix my CSS/HTML or do I need to make it again from scratch?
I'm new at CSS/HTML and I've always used Chrome/Firefox in the past.
Here you can see what I have already, live code is here
https://jsfiddle.net/Azcrod/w7jqyb36/
My CSS partial code here:
background: -webkit-radial-gradient(white, #E98300);
/* Safari 5.1 to 6.0 */
background: -o-radial-gradient(white, #E98300);
/* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(white, #E98300);
/* For Firefox 3.6 to 15 */
background: radial-gradient(white, #E98300);
…and here is a printscreen of how it looks in IE:
Version is IE 11 but I'm hosting it on a intranet server, if that matters.
For a lot of the CSS you are using, IE div border shape changes,background gradients etc. they are CSS3, meaning you need IE9+ usually to see them formatted correctly.
Color issue in IE
put this line on all css class
filter: none !important;
specially color used classes
It depends on wich version of IE you are using (I use IE11 and it looks fine). You can check the supported browser versions here: http://caniuse.com/#search=gradients
For older Versions you can use the following CSS, but there is no multi-stop nor can you tell em to use an specific angle:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0066A1', EndColorStr='#FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#0066A1', EndColorStr='#FFFFFF')"; /* IE8*/
For IE 9 see P.JAYASRI's Answer.
I managed to fix the problem myself. Maybe I explained it the wrong way but what I had to do was go to IE's Compatibility View Settings and disable it for intranet sites. That worked somehow.
Hi am trying to figure out on why in css3 :active or :hover animation dont trigger it works on every other browser. ive wrapped the code into this fiddle
please help me am stuck on this since the past 2 days
in css3 have fix more no of cross browser problem.each browser have a different future.following keywords are using work on all the browser.
Supported by Internet Explorer with the prefix -ms-
Supported by Firefox with the prefix -moz-
Supported by Google Chrome with the prefix -webkit-
Supported by Safari with the prefix -webkit-
Supported by Opera with the prefix -o-
The issue is you are using :active which has an issue in IE (verified in IE 10)
From what I can gather, this is currently not possible as the :active
state of a child is not propagated up to the parent div. Both Internet
Explorer 10 and Opera 11.64 failed to propagate the :active state up
to the parent when testing with div elements.
source: Make a whole div clickable with working :active css rule in IE10
So I've been messing around with SVG filters, and I'd like to apply them to HTML content.
http://paulirish.com/work/videooo.xhtml - works in firefox, not chrome.
https://dl.dropbox.com/u/4031469/woohtml.html - My example, works in FF, not Chrome.
Around the web, I've seen things mentioning the url() syntax for defining svg-based filters, while custom() refers to css shaders.
However, I haven't been able to get the filter working by either using the filter: property, nor the -webkit-filter: property.
Any ideas on how to get them to work? about:flags in Chrome doesn't have any options, so I'm trying to figure out if they're not implemented yet, or if I'm doing something incorrect.
In addition to the shorthand filters (blur, sepia, etc), Chrome now supports SVG filters on HTML content, as of V.21, using the -webkit-filter: url(#foo) syntax.
Webkit doesn't support svg filters on html elements. It does, however, support css filters.
So if you want to support both browsers you could write...
selector {
filter: url(#reference_to_blur);
-webkit-filter: blur(10px);
}
You can see more CSS filters here: http://davidwalsh.name/css-filters
I haven't tested, but I doubt IE9 and Opera support css or svg filters in their current incarnations (IE9 and Opera 11).
Do we require filter gradient ( filter: progid:DXImageTransform.Microsoft.gradient ()for IE only as it work on firefox without it?
Setting the below property in css gave me proper gradient effect on IE
#mainmenu .gradientfilterIE {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77D3F8', endColorstr='#3FA4D8',GradientType=0 );
}
But on Chrome and Firefox it works without it too.
This question is actually in continuation of Why Displaying different gradient color on IE but works perfectly on firefox and chrome?
The filter (and -ms-filter) CSS properties are only supported in Internet Explorer. They’re a Microsoft extension to CSS, and aren’t supported in any other browser
They’re the only non-image way to achieve gradients in Internet Explorer as of version 9 (although IE 10 should support CSS gradients in some form), so they’re required in IE if you want gradients without images.
(Although as #Jules notes, IE 9 does support both SVG images and embedded base-64 encoded images, so you can have gradients in IE 9 without separate image files).
Note that Microsoft’s gradient filter is a bit more limited than the various CSS gradient syntaxes, and SVG’s gradient syntax.
IE filters are not needed on any browser except IE.
Most other browsers support CSS, including CSS3 gradients