CSS Clearing (not floats) 1

[Borvik]

Here's the situation.

I'm setting up a form using fieldsets and CSS the basics of which work fine, however I'm getting a wrench thrown in when I try to add a fieldset that contains a checked listbox.

The labels in the checked list originally had their width inherited from the ".forms label" declaration (135px) - which was no good as I needed them to be the width of the list box. So I changed it to 100% in the ".checklist label" declaration.

The thing is, because of the nature of 100% width, I'm always ending up with a horizontal scrollbar - no matter how wide I make the checklist.

Is there a way to clear an inherited css value - without setting it to something else? If not where can I find a list of default values so I can manually set it to the default?

.forms{
	display: inline; border: 1px solid #000; padding-right: 2px;
}
.forms legend{
	padding: 1px 6px; color: #fff; background: url('images/blueGlass.gif'); border: 1px solid #000;
}
.forms label{
	clear: left;
	display: block;
	float: left;
	text-align: right;
	width: 135px;
	padding-right: 10px;
	margin-bottom: 3px;
}
.forms input, .forms select{
	margin-bottom: 3px;
}
.checklist {
	clear: left;
    border: 1px solid #ccc;
    list-style: none;
    height: 10em;
    overflow: auto;
    width: 20em;
}

.checklist, .checklist li { margin: 0; padding: 0; }

.checklist label {
	float: none;
	text-align: left;
	padding-right: 0px;
	margin-bottom: 0px;
    display: block;
    padding-left: 25px;
    text-indent: -25px;
    width: 100%;
}

.checklist label input {
	margin-bottom: 0px;
}

* html .checklist label { height: 1%; }

.checklist label:hover { background: #777; color: #fff; }

	<fieldset class="forms">
		<legend>Personal/Logon Info.</legend>
		<label for="idFName">First Name:</label><input id="idFName" name="txtFirstName" type="text" /><br />
		<label for="idLName">Last Name:</label><input id="idLName" name="txtLastName" type="text" /><br />

		<label for="idLogon">Logon:</label><input id="idLogon" name="txtLogon" type="text" /><br />
		<label for="idPass">Password:</label><input id="idPass" name="txtPass" type="password" /><br />
		<label for="idPassRetype">Retype Password:</label><input id="idPassRetype" name="txtPass2" type="password" /><br />
		<label for="idEmail">Email:</label><input id="idEmail" name="txtEmail" type="text" />
	</fieldset><br />
	<fieldset class="forms">
		<legend>Arbitrary</legend>
		<label for="idDL">Do Later:</label><input id="idDL" name="txtDL" type="text" /><br />
		<ul class="checklist">
			<li><label for="chkList0"><input id="chkList0" name="chkList[]" type="checkbox" value="1" />Software 1</label></li>
			<li><label for="chkList1"><input id="chkList1" name="chkList[]" type="checkbox" value="2" />Software 2</label></li>
			<li><label for="chkList2"><input id="chkList2" name="chkList[]" type="checkbox" value="4" />Software 3</label></li>
			<li><label for="chkList3"><input id="chkList3" name="chkList[]" type="checkbox" value="8" />Software 4</label></li>
			<li><label for="chkList4"><input id="chkList4" name="chkList[]" type="checkbox" value="16" />Software 5</label></li>
			<li><label for="chkList5"><input id="chkList5" name="chkList[]" type="checkbox" value="32" />Software 6</label></li>
		</ul>
	</fieldset>

 

[monksnake]

Take out the following code

    padding-left: 25px;
    text-indent: -25px;

I'm not sure why you are using that, but the padding adds 25 pixels to your width 100% which results in a 25px length beyond it's container.

 

[Borvik]

Thanks monksnake, that worked.

That was in the original example I found for the checklist - I thought it had something to do with offsetting because of the checkbox.

 

[monksnake]

Glad I could help

<.