I'm having an issue with the rendering of my checkbox in CSS. The checkbox is currently displaying on a separate line from the text, but I would like it to be inline with the rest of the content.
For reference, here is the full CSS and HTML code: http://jsfiddle.net/xmYLG/4/
Here is an example of the HTML output:
<div class="form-block">
<p>Enter Values</p>
<br>
<p>Enter More Values</p>
<br/>
<input type="hidden" name="indicator_set-TOTAL_FORMS" value="6" id="id_indicator_set- TOTAL_FORMS" /><input type="hidden" name="indicator_set-INITIAL_FORMS" value="3" id="id_indicator_set-INITIAL_FORMS" /><input type="hidden" name="indicator_set-MAX_NUM_FORMS" id="id_indicator_set-MAX_NUM_FORMS" />
<tr><th><label for="id_indicator_set-0-indicator">Indicator:</label></th><td><input id="id_indicator_set-0-indicator" type="text" name="indicator_set-0-indicator" value="Length" maxlength="255" /></td></tr>
<tr><th><label for="id_indicator_set-0-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-0-DELETE" id="id_indicator_set-0-DELETE" /><input type="hidden" name="indicator_set-0-relevantdisease" value="1" id="id_indicator_set-0-relevantdisease" /><input type="hidden" name="indicator_set-0-id" value="1" id="id_indicator_set-0-id" /></td></tr> <tr><th><label for="id_indicator_set-1-indicator">Indicator:</label></th><td><input id="id_indicator_set-1-indicator" type="text" name="indicator_set-1-indicator" value="Fungus" maxlength="255" /></td></tr>
<tr><th><label for="id_indicator_set-1-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-1-DELETE" id="id_indicator_set-1-DELETE" /><input type="hidden" name="indicator_set-1-relevantdisease" value="1" id="id_indicator_set-1-relevantdisease" /><input type="hidden" name="indicator_set-1-id" value="2" id="id_indicator_set-1-id" /></td></tr> <tr><th><label for="id_indicator_set-2-indicator">Indicator:</label></th><td><input id="id_indicator_set-2-indicator" type="text" name="indicator_set-2-indicator" value="Gender" maxlength="255" /></td></tr>
<tr><th><label for="id_indicator_set-2-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-2-DELETE" id="id_indicator_set-2-DELETE" /><input type="hidden" name="indicator_set-2-relevantdisease" value="1" id="id_indicator_set-2-relevantdisease" /><input type="hidden" name="indicator_set-2-id" value="41" id="id_indicator_set-2-id" /></td></tr> <tr><th><label for="id_indicator_set-3-indicator">Indicator:</label></th><td><input id="id_indicator_set-3-indicator" type="text" name="indicator_set-3-indicator" maxlength="255" /></td></tr>
<tr><th><label for="id_indicator_set-3-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-3-DELETE" id="id_indicator_set-3-DELETE" /><input type="hidden" name="indicator_set-3-relevantdisease" value="1" id="id_indicator_set-3-relevantdisease" /><input type="hidden" name="indicator_set-3-id" id="id_indicator_set-3-id" /></td></tr>
<tr><th><label for="id_indicator_set-4-indicator">Indicator:</label></th><td><input id="id_indicator_set-4-indicator" type="text" name="indicator_set-4-indicator" maxlength="255" /></td></tr><tr><th><label for="id_indicator_set-4-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-4-DELETE" id="id_indicator_set-4-DELETE" /><input type="hidden" name="indicator_set-4-relevantdisease" value="1" id="id_indicator_set-4-relevantdisease" /><input type="hidden" name="indicator_set-4-id" id="id_indicator_set-4-id" /></td></tr> <tr><th><label for="id_indicator_set-5-indicator">Indicator:</label></th><td><input id="id_indicator_set-5-indicator" type="text" name="indicator_set-5-indicator" maxlength="255" /></td></tr>
<tr><th><label for="id_indicator_set-5-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-5-DELETE" id="id_indicator_set-5-DELETE" /><input type="hidden" name="indicator_set-5-relevantdisease" value="1" id="id_indicator_set-5-relevantdisease" /><input type="hidden" name="indicator_set-5-id" id="id_indicator_set-5-id" /></td></tr>
Here is the relevant CSS:
form {}
label, input[type=button], input[type=submit], button {cursor:pointer;}
input[type="radio"] {vertical-align:text-bottom;}
input[type="checkbox"] {vertical-align:bottom;*vertical-align:baseline;}
input[type="checkbox"] {
display: inline;
.form-block label {
display: block;
margin-bottom: 5px;
margin-left: 5px;
color: #333;
}
.form-block .blocklet {
padding-right: 30px;
}
.form-block .subquestion {
margin-top: 10px;
padding-left: 10px;
border-left: 2px solid #ccc;
}
.form-block .subquestion,
.form-block .subquestion label {
font-size: 13px;
}
If you need more information or explanation about the code due to my limited experience with CSS, please feel free to ask.