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.
Related
I have finished designing my website but it displays differently on firefox, chrome and internet explorer. I believe i have done everything right but i dont know what is happening. Actually, google chrome displays it as i want it to, but firefox and internet explorer does not. My internet explorer version is 10 and firefox is 29. Please any help is much appreciated. thanks
This is the link to hosted site: http://www.ruebenpersonal.netai.net.
http://pastebin.com/xTnXeGhq - Link to the html source code.
Some browsers are uses the same rendering engine and some are not.
For example:
Google Chrome and Safari browsers are using : Webkit Engine (See: http://www.webkit.org/)
Firefox is using Gecko Engine (A.K.A. Moz) - (See: http://en.wikipedia.org/wiki/Gecko_(software)
Opera is using : Presto (See: http://www.opera.com/docs/specs/productspecs/)
So differences between rendering engines are normal. Which is why we are using their css properties like;
-webkit-border-radius /* For Webkit */
-moz-border-radius /* For Gecko */
-o-border-radius /* For Presto */
border-radius /* For IE9+ */
Some older browsers like Internet Explorer 6, 7, 8 are not giving support for most of CSS3 methods. To enable that methods, there are available to use JS engines like html5shiv or modernizr.
Note: You can use a service like this to generate starter templates that supports almost every browser.
Initializr: http://www.initializr.com/
Each browser uses different rendering engines. This means that certain HTML elements, CSS styles, etc. will be interpreted differently or not at all by browsers that do not share the same rendering engine.
To understand more, I would refer to this link: http://taligarsiel.com/Projects/howbrowserswork1.htm
As far as developing for multiple browsers, I would look into the modernizr javascript library, http://modernizr.com/, and for quick reference, caniuse.com.
Hope this is helpful.
I have been trying to apply CSS to a thin spacer that I have .
Normally for mozilla, the gradient that i have added is :
background: linear-gradient(to bottom, #ffffff 18%,#ecedeb 18%,#d1d5d0 100%);
This looks in mozilla like :
For IE , i added the following bit of code :
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d5d0',GradientType=0 );
And in IE this looks like :
As you can see from above , the spacer in IE is not a thick continuous red line, however, in mozilla it is so. Can somebody suggest as to how must i make the spacer in IE thick and continuous like in mozilla ?
EDIT : For the folks who are facing this problem, i have used CSSPIE3(PIE.js version 1.0) as per Spudley's suggestion to overcome this problem .
There aren't any good solutions for gradients in old-IE -- it's just something that those old browsers simply don't do very well.
IE's old filter styles are well known for having major bugs and quirks. As you're finding, they're really not much fun to work with.
You have a couple of other options though:
You could just drop the gradients for old IE versions. It's only a visual nicety, and won't affect the actual functionality of the site. Okay, so old IE users may not get the site looking quite as nice as people with newer browsers.... well, yeah, but you know what? They're on an old IE versions, so used to that by now; they can live with it.
Creating a plain fall-back is easy. Simply specify a normal plain colour background style in the CSS immediately above your gradient background. Where there's a conflict, browsers will take the last one they understand, so modern browsers will take the gradient and old IE (and other old browsers if anyone's using them) will take the plain colour background.
If you really do need the gradients, you could try using the CSS3Pie library. This is a little Javascript lib that tries to add a few standard CSS features to old IE versions, including CSS gradients. It works internally by using VML graphics, not filter styles, which means that you don't get the bugs that filter causes, so it might work better for you in this case than what you have.
Hope that helps.
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
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.