CODEWITHSUNDEEP
htmlcss
nlr25
nlr25

Reputation: 1635

Checkbox inlines rendering on separate line

I am new to css and have a rendering problem with my checkbox. My checkbox appears on a separate line to the rest of my text. I would like for the checkbox to appear on the same line as the rest of the text.

The link to the complete CSS and HTML code: http://jsfiddle.net/xmYLG/4/

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>

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;
}

I'm new to CSS so please let me know if you need more clarity or code.

Upvotes: 0

Views: 820

Answers (1)

Robbert
Robbert

Reputation: 6592

It appears you are missing the table tag. When I add opening and closing table tags to your JSFiddle, the table loads exactly as expected,

When HTML doesn't render correctly, a good tool to use is http://validator.w3.org. It will show you errors you may have in your markup.

Upvotes: 1

Related Questions