CSS, Forms & Strict XHTML Help

MeatProduct

Hi again,

I'm working on the same project and am putting in a form to search through the database. It's proving difficult for me to meet the design/layout I came up with for the from.

Here's what I want:

and here's what I'm getting:


I'm quite new to CSS so please feel free to hammer me on any bad methods I'm using. My alignments are all off and I'm at a loss as to how to acheive the layout I want, especially with the little geometries being perfectly aligned above the check boxes. Also the "area" alignments are driving me nuts!

Hopefully someone has the time to point out how I might do this.

Thank you,

Nick

<div id="preface-sidebar">
<div id="search-fields">
<form id="form1" method="post" action="">
<fieldset id="search-fieldset">
<h2>Search Plans</h2>
<hr/>

<div id="search-bedrooms">
<h6>Number of Bedrooms</h6>
<ul>
<li><label>1<input type="checkbox" name="checkbox1" id="checkbox1" /></label></li>
<li><label>2<input type="checkbox" name="checkbox2" id="checkbox2" /></label></li>
<li><label>3<input type="checkbox" name="checkbox3" id="checkbox3" /></label></li>
<li><label>4<input type="checkbox" name="checkbox4" id="checkbox4" /></label></li>
<li><label>5<input type="checkbox" name="checkbox5" id="checkbox5" /></label></li>
<li><label>6+<input type="checkbox" name="checkbox6" id="checkbox6" /></label></li>
</ul>
</div>

<div id="search-area">
<h6>Total Area</h6>
<div id="search-area-ft">
<ul>
<li><label>from</label><input name="textfield1" type="text" id="textfield1" size="4" maxlength="5" />ft2</li>
<li><label>to</label><input name="textfield3" type="text" id="textfield3" size="4" maxlength="5" />ft2</li>
</ul>
</div>

<div id="search-area-m">
<ul>
<li><label>from</label><input name="textfield2" type="text" id="textfield2" size="4" maxlength="5" />m2</li>
<li><label>to</label><input name="textfield4" type="text" id="textfield4" size="4" maxlength="5" />m2</li>
</ul>
</div>
</div>

<div id="search-geometry">
<h6>Geometry</h6>
<ul>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-vesica.png" />
<input type="checkbox" name="checkbox7" id="checkbox7" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-hex.png" />
<input type="checkbox" name="checkbox8" id="checkbox8" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-pent.png" />
<input type="checkbox" name="checkbox9" id="checkbox9" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-triangle.png" />
<input type="checkbox" name="checkbox10" id="checkbox10" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-circle.png" />
<input type="checkbox" name="checkbox11" id="checkbox11" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-square.png" />
<input type="checkbox" name="checkbox12" id="checkbox12" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-sept.png" />
<input type="checkbox" name="checkbox13" id="checkbox13" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-octa.png" />
<input type="checkbox" name="checkbox14" id="checkbox14" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-gold.png" />
<input type="checkbox" name="checkbox15" id="checkbox15" />
</label>
</li>
</ul>
</div>
<div id="search-advanced">
Advanced Search>>
</div>
<div id="search-button">
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</div>
</fieldset>
</form>
</div>
</div>

#preface-sidebar {
background: url('images/search-bg.jpg') no-repeat center;
float: left;
height: 298px;
margin: 0 0 0 0px;
padding: 0px;
width: 297px;
}

#search-fields {
padding: 5px 5px 5px 15px;
}

#search-fields h2 {
color: #fff;
font-size: 1.6312em;
}

#search-fields hr {
color: #eee;
background-color: #eee;
height: 1px;
width:200px;
text-align:left;
border: 0;
}

#search-fieldset
{ border:2px;
padding: 0px;
margin: 0px;
color:none;
background-color:transparent;
}

#search-fieldset label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}


#search-bedrooms
{
}

#search-bedrooms ul
{ padding: 0px;
margin: 0px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
margin-bottom:45px;
width:300px;
}

#search-bedrooms li
{ float: left;
width: 20px;
color: #000;
}

#search-area
{ float: left;
}

#search-area-ft
{ float: left;
width: 130px;
}

#search-area-m
{ float: left;
width: 130px;
}

#search-area ul
{ padding: 0px;
margin: 0px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}

#search-area li
{ float: left;
color:#000;
}

#search-geometry
{ float: left;
}

#search-geometry ul
{ padding: 0px;
margin: 0px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}

#search-geometry li
{ float: left;
width: 30px;
color:#000;
}

#search-advanced
{ float: left;
width:120px;
}

#search-button
{ float: right;
width:100px;
}

daymobrew

Your use of label seems to be off.

<li><label>1<input type="checkbox" name="checkbox1" id="checkbox1" /></label></li>

I recommend changing this too.

<li><label for="checkbox1">1</label><input type="checkbox" name="checkbox1" id="checkbox1" /></li>

Also, I recommend giving your form elements better names/ids - it will help you in the server side coding.

The above will probably not resolve your issues.
I recommend using firebug and use "Inspect Element" to see what CSS is influencing an element and you can edit the CSS to fix it (though these changes will not be saved).