I am encountering an issue with the CSS on my website specifically in IE8. The problem lies within the CSS intended to outline input elements labeled with class="error" with a 2px red border. While this function performs as expected for some input elements, others are displaying a 2px white border instead. Interestingly, removing the display: table-cell attribute from the input elements resolves the inconsistency, and the borders display correctly. This peculiar behavior is isolated to IE8, as the CSS functions properly across other browsers such as FF3, Chrome, and Opera.
Included below are excerpts of the page's DOM tree and relevant CSS extracted from IE8's Developer Tools window showing both a functional input element and a non-functional one. Despite these resources, I am struggling to identify the discrepancy between them. Any assistance or insight would be greatly appreciated.
Thank you.
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