Why is my CSS sometimes working in IE8 and not other times?

I am having some trouble with the CSS on my site in IE8. The CSS in question is supposed to draw a 2px red border around input elements marked with class="error". It works as expected for some input elements on the page, but for others it draws a 2px white border around the element instead. If I remove the display: table-cell attribute from the in开发者_如何转开发put elements, then they all work correctly. The CSS works as expected on all of the other browsers I've tried (FF3, Chrome, Opera).

I've copied and pasted the relevant parts of the page's DOM tree and CSS -- as shown by IE8's Developer Tools window -- below for both a working input element and a non-working element. I can't really figure out what the difference is between them. Can anyone help?

Thanks.

DOM Tree

<form>
    <div class="table" id="contact_info">
        <div class="row" id="email">
            <label for="email_text">
                Text - E-Mail Address
            Text - Empty Text Node
        <!-- this input element doesn't show the correct border color -->
            <input name="email" class="error" id="email_text" type="text" AUTOCOMPLETE="OFF" value="invalid address"/>
            <label class="error" for="email_text" generated="true">
                 Text - Please enter a valid e-mail address
            Text - Empty Text Node
        <div>...
    <div class="table" id="security_info">
         <div class="row" id="password_conf">
             <label for="password_conf_text">
                 Text - Re-type Your Password
             Text - Empty Text Node
         <!-- this input element does show the correct border color -->
             <input name="password_conf" class="error" id="password_conf_text" type="password" value="nomatch"/>
             <label class="error" for="password_conf_text" generated="true">
                 Text - Please enter the same value again.
             Text - Empty Text Node

** The CSS for input#email_text (not working) **

inherited - body
    BODY
        text-align: center
        font-family: Arial, Helvetica, sans-serif
        font-size: 12pt
inherited - div
    #container
        text-align: left
FORM .row > *
    margin: 3px 0px
    display: table-cell                 // if I turn this off, then the borders work
    vertical-align: top
INPUT.error
    border-bottom: red 2px solid
    border-left: red 2px solid
    border-top: red 2px solid
    border-right: red 2px solid
INPUT[type='text']
    font-family: Arial, Helvetica, sans-serif
    font-size: 12pt
INPUT[type='text']
    width: 175px

** The CSS for input#password_conf_text (working) **

inherited - body
    BODY
        text-align: center
        font-family: Arial, Helvetica, sans-serif
        font-size: 12pt
inherited - div
    #container
        text-align: left
FORM .row > *
    margin: 3px 0px
    display: table-cell
    vertical-align: top
INPUT.error
    border-bottom: red 2px solid
    border-left: red 2px solid
    border-top: red 2px solid
    border-right: red 2px solid
INPUT[type='text']
    font-family: Arial, Helvetica, sans-serif
    font-size: 12pt
INPUT[type='text']
    width: 175px

---

You are missing semicolons at the end of each property's line and brackets at the beginning and end. Such as form { border:none; color: #333 }

---

have you tried .error in your css not FORM.error ?