My css looks messed up in IE

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

Color issue in IE

put this line on all css class

filter: none !important;

specially color used classes