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!

I see that the input also contains a class ".noBdr". Is that class positioned in the css above or below the ".settings_content input"? — pazcal, Nov 01 '13 at 06:54
@PazcaldeJonge, yes, there is a class for ".noBrd" in css, they are actually in two different CSS, the ".noBrd" css is an overriding css, which is supposed to override the base.css in which the ".settings_content input" is in. — Kevin, Nov 01 '13 at 06:57

score 2 · Accepted Answer · edited May 23 '17 at 11:59

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.

edited May 23 '17 at 11:59

Community

1
1

answered Nov 01 '13 at 07:10

skip405

6,119
2
25
28

the !important method doesn't work in IE8. Do you have any suggestions or do I have to make it a regular input? – Kevin Nov 01 '13 at 09:23
@Kevin, no methods will allow you to do that. It is a browser feature. a) you either _undisable_ the input (but I assume it is done for a reason, so be careful) b) you accept that lucky IE8 users will be happy to see the grey color of an input (not your needed color) - aka "graceful degradation" – skip405 Nov 01 '13 at 10:59

SaurabhLP · Answer 2 · 2013-11-01T10:33:49.900

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...

edited Nov 01 '13 at 10:33

answered Nov 01 '13 at 06:59

SaurabhLP

3,619
9
40
70

IE8 issue in displaying CSS stylesheet

2 Answers2