Geek Answers Handbook

Apply CSS style to <div>

My problem is the following 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 an input field, I add the "curFocus" class to the external div through some javascript to highlight both the 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 when using debuggers in Chrome 12 and IE9, both of them display the border options applied to the external div. But when viewing the form, no browser displays the specified border. All other css settings work correctly. I also tried changing the definition of .curFocus to a .curFocus div. But it also applied a style to each of the nested divs, but displayed the boundaries of all sections.

While I am not a CSS expert, it is not obvious why this should not work.

jsfiddle - http://jsfiddle.net/photo_tom/KmsF5/1/. IE9, IE7. . , , , jsfiddle .

+5
3

, , , , . display: table-row; . table-cell .curFocus, table-row.

, , , 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 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 */
}

. http://jsfiddle.net/d772N/

+3

, - .editor. display: table-row; , . , display: table-row; .

+1

You may need higher CSS specifics, as it is ambiguous which CSS styles will be applied with the current definitions.

Try div.curFocus, and not .curFocus div, that the class definition applies style to the div with that class name, and not its children div.

0
source

More articles:


All Articles