1

Below are the CSS applied and got this issue,

 background-color: rgba(91, 94, 85, 0.5) !important;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55);
filter:ms-linear-gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55); /*fix for round corner edges in IE9 and input mess rendering in all IE */

image 1 : FF,Chrome & IE 9 working fine

image 2 : IE8 not fine

Im not sure how to fix this input properly in IE8. i guess its happen becoz of filter filter:ms-linear-gradient, if i remove this filter in IE8 background color applying but inputs are messed up as below image.

if i have this filter inputs are rendering properly in IE8 background color not applied as expected

firefox working the inputs visible properly

IE8 the inputs bg are messed up

Thanks ,

Nithish

Nithish
  • 253
  • 2
  • 4
  • 16

1 Answers1

7

Issues with your code:

  • background-color: rgba(91, 94, 85, 0.5) !important;
    This line seems OK. It's very likely that the !important flag is redundant, though.
  • filter:progid:DXImageTransform.Microsoft.gradient( ... );
    This line is also OK, although the -ms-filter: "..."; syntax is preferred in IE8+.

  • filter:ms-linear-gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55);
    Here starts the trouble:

    1. Internet Explorer's vendor-prefix is -ms-, (with the hyphen at the start).
    2. -ms-linear-gradient is a value for background, not filter.
      Also, this value is only supported as of IE 10...
  • //fix for round corner edges in IE9 Comments in CSS are in this format: /* comment */.
    No exceptions.

Fix:

background-color: rgba(91, 94, 85, 0.5) !important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55)";
Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • even i gave -ms-filter same issue happens and sorry tht comment i just updated and its for stackoverflow commenting... and how can i fix this issue for IE8 – Nithish Apr 12 '12 at 14:49
  • @Nithish I've included a fix at the bottom of the answer. Try that one. I've tested it, and it works in IE8, IE7, and even IE6: http://jsfiddle.net/a2NkX/ – Rob W Apr 12 '12 at 14:52
  • background is ok but the thing is input fields are messed up as shown in above image the css are as follows background-color: rgba(91, 94, 85, 0.5) !important; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55); i removed tht ms-linear-grad filter so tht inputs are not showing as same as image 1 how to i resolve tht – Nithish Apr 12 '12 at 15:37
  • u can chk the background color missing after applying the ms-linear-grad missing http://jsfiddle.net/a2NkX/1/ – Nithish Apr 12 '12 at 15:40
  • @Nithish Remove that line, and use my original fiddle. `filter:ms-linear-gradient` does **nothing**. – Rob W Apr 12 '12 at 15:43
  • But in my application that filter[ms-linear-grad] renders the input in IE8 properly as same as in FF... but the background color missing as in the http://jsfiddle.net/a2NkX/1 – Nithish Apr 12 '12 at 15:55
  • @Nithish Can you show a picture of what you want? `-ms-linear-gradient` is a value for `background`, not for `filter:`. – Rob W Apr 12 '12 at 16:07