Apply CSS style to <div>

Question

My problem is with the below html

<div class="editor-container">
   <div class="editor-row curFocus">
       <div class="editor-label">
           <label for="FirstName">First Name</label>
       </div>
       <div class="editor-field">
          <input class="text-box single-line valid" id="FirstName" 
                name="FirstName" type="text" value="Nancy" maxlength="20">
       </div>
   </div>
</div>

When the user selects the input field, I add class "curFocus" to the outer div via some javascript to highlight both label and the input field.

My css is -

.editor-container {
    border: thin solid #444444;
    display: table; width: 100%;
 }
.editor-row {
  width: 100%; display: table-row;
}
.editor-label {
  padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
   padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
   display: table-cell;
 }
 .curFocus {
   border: 2px solid #05365b;
   background-color: #d3e5f2;
   margin: 3px; padding: 3px;
  }

My problem is that while using debuggers in Chrome 12 and IE9, they both show the border settings being applied to the outer div. But, when viewing the form, neither browser display's the specified border. All other css settings work correctly. I also tried changing definition of ".curFocus" to ".curFocus div". But this applied the style to each of the nested div's also, but did display borders on all of the divs.

While I'm not a CSS expert, it is not obvious why this shouldn't work.

---

Edit Here is jsfiddle link - http://jsfiddle.net/photo_tom/KmsF5/1/ . While testing this it does work correctly in IE9 if in IE7 compatibly mode. Otherwise, it does not display correctly. Sorry about not including link, still getting use to fact that jsfiddle even exists.

Answer 1

Well, I can tell you what's causing it, but I can't tell you why. Elements with display: table-row; can't have a border applied to them. You can apply the border to the table-cell children of the .curFocus element, but not the table-row itself.

Again, no idea why this silly rule exists, but you can fix your problem with some CSS:

.curFocus {
   background-color: #d3e5f2;
   margin: 3px; padding: 3px;
}

.curFocus>div {
   border: 2px solid #05365b;
   border-width: 2px 0px;  /* top and bottom border for all the table-row's immediate children (table-cells) */
}

.curFocus>div:first-child {
    border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}

.curFocus>div:last-child {
    border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}

See http://jsfiddle.net/d772N/

Answer 2

I think your problem is your display type on the.editor-row. display: table-row; Remove that and the problem will go away. Plus I don't think that all browsers support display: table-row; very well.

Answer 3

You might need a higher CSS specificity, as it is ambiguous which CSS styles will apply with the current definitions.

Try div.curFocus rather than .curFocus div for the class definition to apply the style to the div with that class name rather than its div children.