Getting Labels by Checkbox Input

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>

and the css

	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
.checkboxpad label{

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

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?

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

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>

is what you should get before CSS appears.

got it to work :slight_smile: thanks!