CSS and IE8: How can I get the CSS color property to work consistently on submit inputs in IE8?

Question

I am using an input type='submit' with CSS rules applied that make the background a gradated dark blue and the font color white. I cannot get this input to render consistently in IE 8. In some parts of my site, it looks just fine, with its lovely white type. In other parts, the color assigned to the body trumps the white applied by the CSS rules.

I've done a fair bit of research on this and can't find a solution that works. The one I did find on CSS Tricks recommended adding the css using jQuery. I tried this. I successfully added an inline style, but IE8 still trumped my white. I've switched in and out of Compatibility View, still no dice. 0

Why?

Here is the pertinent markup and CSS.

CSS

body {
 color:#222;
 font-size: 12px;
 width:100%;
 background:#8A7967 url(images/bg_body.png) top left repeat-x;
}
.buttonBigBlue,
input[type="submit"] {
 color:#FFF!important;
 -webkit-border-radius:12px;
 -moz-border-radius: 12px;
 border-radius:12px;
 padding:3px 9px;
 text-transform:uppercase;
 font-weight:bold;
 text-align:center;
 vertical-align:middle;
 border:1px solid #74a1a9;
 cursor:pointer; 
 background: #678382; /* for non-css3 browsers */
 background:-webkit-gradient(linear, left top, left bottom, from(#77A7B1), to(#678382));
 background:-moz-linear-gradient(top, #77A7B1, #678382);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382'); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382')"; /* IE8 */
}

MARKUP

<input type="submit" class="buttonBigBlue" id="login" value="Login" name="login">

This button displays with #222 text in IE8.

<input type="submit" class="buttonBigBlue" id="saveChanges" value="Save Changes" name="saveChanges">

This button displays with #FFF text in IE8

---

UPDATE after further investigation.

The containing div for the inputs that won't display properly is called #loginBox. It's styles are these:

#loginBox {
 width:300px;
 margin:25px auto;
 padding: 25px 30px 30px;
 border:1px solid #c9b9a8;
 -webkit-border-radius:9px;
 -moz-border-radius: 9px;
 border-radius:9px 9px 9px 9px;
 -webkit-box-shadow:rgba(0,0,0,.3) 4px 4px 6px;
 -moz-box-shadow: 4px 4px 6px rgba(0,0,0,.3);
 /* For IE 8*/ 
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845')";
 /* For IE 5.5 - 7*/ 
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845');
 min-height:160px;
 background-color:#fff;
 box-shadow: 4px 4px 6px rgba(0,0,0,.3);
}

When I remove the -ms-filter and filter rules that set the box shadow, the input text returns to white.

• Qix - MONICA WAS MISTREATED: Just throwing something out here -- the advanced selector of [type="submit"] may or may not be supported in IE8. It is, in fact, a css3 selector and so IE's compatibility may be sketchy. Just a thought.
• meder omuraliev: Have you thought of just using a bg image or type="image"?
• mingos: @Di-0xide: IE supports this perfectly.
• Knu: remove the comments in #loginBox
• JanetT: Knu--I tried that. Removing the comments and leaving the filters turned the text black again. I suspect that IE8 can't handle the filters that work to put a gradient on the button combined with the filters that put a drop shadow on the box.

Answer 1

Both display the same way in my IE8

example: http://www.jsfiddle.net/gaby/9grJP/

Maybe you have other rules overriding these ones.

Answer 2

alt text

Revise your CSS, you likely have some CSS rule that overrides this. Your sippet works perfectly standalone.