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
– pazcal, Commented Nov 1, 2013 at 6: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
– Kevin, Commented Nov 1, 2013 at 6:57

Community · Accepted Answer · 2017-05-23 11:59:02Z

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, 2017 at 11:59

CommunityBot

11 silver badge

answered Nov 1, 2013 at 7:10

skip405

6,3293 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin Over a year ago

the !important method doesn't work in IE8. Do you have any suggestions or do I have to make it a regular input?

skip405 Over a year ago

@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"

SaurabhLP · Accepted Answer · 2013-11-01 10:33:49Z

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 1, 2013 at 10:33

answered Nov 1, 2013 at 6:59

SaurabhLP

3,6559 gold badges42 silver badges71 bronze badges

Collectives™ on Stack Overflow

IE8 issue in displaying CSS stylesheet

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related