SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code html4strict:
    <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
    Code 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. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,445
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    I don't imagine the double divs are the problem, but you could try
    HTML Code:
    <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. #3
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    I don't imagine the double divs are the problem, but you could try
    HTML Code:
    <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

    Code css:
    .span-3 { width: 184px; }

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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. #5
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    got it to work thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •