Getting Labels by Checkbox Input

HTML & CSS
1

I’m trying to get labels by the checkboxs and cant seem to get it to work… this is what I have


<fieldset><legend>Property Type</legend>
<div class="span-3"><div class="checkboxpad"><input type="checkbox" value="Residential" id="buyresidential" name="Type[]"><label for="buyresidential">Residential</label></div></div>
<div class="span-3"><div class="checkboxpad"><input type="checkbox" value="Commercial" id="buycommercial" name="Type[]"><label for="buycommercial">Commercial</label></div></div>
<div class="span-3"><div class="checkboxpad"><input type="checkbox" value="Land" id="buyland" name="Type[]"><label for="buyland">Land</label></div></div>
<div class="span-3 last"><div class="checkboxpad"><input type="checkbox" value="Investment" id="buyinvestment" name="Type[]"><label for="buyinvestment">Investment</label></div></div>
</fieldset>

and the css


input[type="checkbox"]{
	top:0;
	}
.checkboxpad{
	background:#641318;
	padding:5px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	}
.checkboxpad label{
	color:#fff;
	margin-bottom:0;
	}

Would this be the proper way to use labels in XHTML 1.0 Strict?

2

I don’t imagine the double divs are the problem, but you could try

<div class="span-3 checkboxpad">

for those instead.

I’m more suspect of the CSS. AFAIK the “border-radius” property has sketchy browser support at best. Do the labels fall into place with those out of the CSS?

3

yea border-radius is a bit sketchy… i was wonderin if i should use it… i see it used sometimes and sometimes its not iwth the other border properties so i just included it for now… as far as the span-3 and the checkboxpad if i add checkboxpad to the same div as span-3 it will add the padding to the div and it wont display properly since span-3 is defined by blueprint css


.span-3 { width: 184px; }
4

Bleh. Can you remove all the blueprint stuff for that section, and start with a plain label and plain checkbox first?

See how those work by default, then start adding in the css and other elements until you can see what’s not working.

I mean, by default a label will sit right next to a checkbox. In fact, it actually means it’s a good idea to add whitespace somewhere. I add it inside the label.

<input type=“checkbox” name=“foo” id=“foo” value=“” /><label> TEXT</label>

❏ TEXT
is what you should get before CSS appears.

5

got it to work :slight_smile: thanks!