IE8 issue in displaying CSS stylesheet

Question

H, I am new to browser compatibility issue debugging.

I have following html segment:

<div class="settings_content">
 ...
 ...

 <div class="field">
    <input name="name" maxlength="256" type="text" size="32" value="" class="noBdr" disabled="">
 </div>

and I have a corresponding CSS for the input field:

 .settings_content input
 {
    color: #505050;
 }

in browser Chrome, IE10, IE9, the text indicated by that "input" tag will all be rendered correctly as black. However, if I test it in IE8, the text will still be shown, but the color will turn into grey.

I don't think this is a CSS issue but more of a cross-browser issue. Could experts give me some hints on where to debug? Thanks!

Answer 1

Try using !important

Like this:

.settings_content input
 {
    color: #505050 !important;
 }

This might solve your problem...

OR

Use inline css like:-

<input /**********/ style="color: #505050 !important;" />

OR

Use some Browser Hacks for this...

Answer 2

Unfortunately, you can't change the color of a disabled input in Internet Explorer 7, 8 or 9. If it were a regular input, your styles would have applied even without the !important part suggested in the previous answer. For more info on the topic consider reading another thread.

EDIT: It works in IE10 though. You can open this fiddle in IE to check.