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

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开发者_StackOverflow社区 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.

---

Both display the same way in my IE8

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

Maybe you have other rules overriding these ones.

---

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