CSS check box alignment

I'm struggling to get the checkboxes and labels aligned like the textfield and labels. The actual HTML is dynamically generated by a web framework (Struts2) so I can't change it. This example has the checkboxes "out by one". Can someone tell me what I'm missing.

enter code here<html><head>
<style type="text/css">

html,body {
    height: 100%;
    margin: 0;
    padding: 0;
        font-family: verduna, ariel, helvetica, lucinda-sans, sans-serif;
        font-size:14px;
}

form#simpleForm label.textfieldlabel {
float:left;
width: 15em;
text-align:right;
margin:0 1em 0 0;
clear:both;
}


form#simpleForm label.checkboxLabel {
float:left;
text-align:right;
margin: 0 1em 0 0;
width:15em;
clear:left;
}



form#simpleForm input[type="checkbox"] {

float:left;
display:block;

}



form#simpleForm input[type="text"],textarea
  { font-family: "Trebuchet MS", Trebuchet, "Gill Sans", "Gill Sans MT", Helvetica, Verdana, Arial, sans-serif;
    font-size: small;
    margin: 0 0 .5em 0;
    padding: .1em;
    width: 17em;
    border: 1px solid #666;
    }


form#simpleForm input[type="submit"]
  { float: none;
    clear: both;
    width: auto;
    margin-top: 1em;
    margin-left: 8em;
    }

form#simpleForm br {
   clear:both;
}



</style>

</head><body id="" onload="">


<form id="simpleForm" name="simpleForm" action="/edit-user-input" method="post">
<fieldset>

<legend>User Details</legend>
<input name="id" value="r" id="simpleForm_id" type="hidden">
<label for="dummy" class="textfieldlabel">User Name</label>
<input name="dummy" value="r" disabled="disabled" id="simpleForm_dummy" type="text"><br>
<label for="serial" class="textfieldlabel">Vci Serial Number</label>
<input name="serial" value="12345" id="simpleForm_serial" type="text"><br>
<label for="enabled" class="textfieldlabel">Enabled</label>
<input name="enabled" value="true" id="simpleForm_enabled" type="text"><br>
</fieldset>
<fieldset>
<legend>Roles</legend>
<input name="selectedroles" value="ROLE_ADMIN" id="selectedroles-1" type="checkbox">
<label for="selectedroles-1" class="checkboxLabel">Adminstrator</label>
<input name="selectedroles" value="ROLE_USER" id="selectedroles-2" checked="checked" type="checkbox">
<label for="selectedroles-2" class="checkboxLabel">Diagnostics</label>
<input name="selectedroles" value="ROLE_UBER" id="selectedroles-3" type="checkbox">
<label for="selectedroles-3" class="checkboxLabel">Unrestricted</label>
<input name="selectedroles" value="ROLE_SELECT_VCI" id="selectedroles-4" type="checkbox">
<label for="selectedroles-4" class="checkboxLabel">Choose Connection</label>
<input name="selectedroles" value="ROLE_TESTER" id="selectedroles-5" type="checkbox">
<label for="selectedroles-5" class="checkboxLabel">View/Run Unpublished Services</label>
<input id="__multiselect_cbox" name="__multiselect_selectedroles" value="" type="hidden">
</fieldset>

<button type="submit" id="simpleForm_edit-user" name="action:edit-user" value="Submit" class="formButton">
Edit
</button>

<input id="simpleForm_redirectAction:list-users" name="redirectAction:list-users" value="Cancel" type="submit">


</form>

ansaurus

tags:

views:

answers:

CSS check box alignment

related questions