dreamweaver css using li and ul

Hi, i am trying to create the first page of my lab so that it looks like the jpg attached.  What am i doing wrong that the text boxes aren't aligning up neatly as they go down the page? sample
<?php echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 		
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<title>This is lab 3!</title>

<style type="text/css">
	ul{ list-style:none; margin-top: 5px;}
	ul li { display:block; float: left; wdith: 100% height: 1%;}
	ul li label { float: left; padding: 7px; }
	ul li input, ul li textarea { float: right; margin-right: 10px; border: 1px solid #000; padding: 3px; width: 60%;}
	li input:focus { border: 1px solid #ccc;}
	fieldset{ padding: 10px; border: 1px solid #ccc; width: 400px; overflow: auto; margin: 10px;}
	legend { color: #306; margin: 0 10px 0 0; padding: 0 5px; font-size: 12pt; font-weight: bold;}
	label span { color: #ff0000;}
	fieldset#billing{ position: absolute; top: 60px; left: 20px;}
	fieldset#shipping{ position: absolute; top: 60px; left: 460px;}
	fieldset#submit{ position: absolute; top: 540px; left: 20px; width: 840px; text-align: center;}
	fieldset input#SubmitBtn{ background-color: #CCC; color: #000; border: 1px solid #666; padding: 5px; width: 150px;}



<h1>Lab03 - Index Page</h1>

<form id="form0" method="post" action="getFormData.php">
	<fieldset id="billing" name="billing">
    	<legend>Billing Information</legend>
        	<li><label title="Name" for="name">Name <span>*</span></label><input type="text" name="name" id="name" size="30" maxlength="30"/></li>
            <li><label title="Address" for="address">Address <span>*</span></label><input type="text" name="address" id="address" size="30" maxlength="30"/></li>
            <li><label title="City" for="city">City <span>*</span></label><input type="text" name="city" id="city" size="30" maxlength="30"/></li>
            <li><label title="State" for="state">State <span>*</span></label><input type="text" name="state" id="state" size="30" maxlength="30"/></li>
            <li><label title="Zip" for="zip">Zip <span>*</span></label><input type="text" name="zip" id="zip" size="30" maxlength="30"/></li>
            <li><label title="Country" for="country">Country <span>*</span></label><input type="text" name="country" id="country" size="30" maxlength="30"/></li>
            <li><label title="Phone" for="country">Phone <span>*</span></label><input type="text" name="phone" id="phone" size="30" maxlength="30"/></li>
            <li><label title="Email" for="email">Email <span>*</span></label><input type="text" name="email" id="email" size="30" maxlength="30"/></li>
            <li><label title="Comments" for="comments">Comments <span>*</span></label><textarea name="comments" id="comments" rows="5" cols="40"></textarea></li>        
    <fieldset id="shipping">
<legend>Shipping Info (if different from billing)</legend>
        	<li><label title="SName" for="Sname">Name</label><input type="text" name="Sname" id="Sname" size="30" maxlength="30"/></li>
            <li><label title="SAddress" for="Saddress">Address</label><input type="text" name="Saddress" id="Saddress" size="30" maxlength="30"/></li>
            <li><label title="SCity" for="Scity">City</label><input type="text" name="Scity" id="Scity" size="30" maxlength="30"/></li>
            <li><label title="SState" for="Sstate">State</label><input type="text" name="Sstate" id="Sstate" size="30" maxlength="30"/></li>
            <li><label title="SZip" for="Szip">Zip</label><input type="text" name="Szip" id="Szip" size="30" maxlength="30"/></li>
            <li><label title="SCountry" for="Scountry">Country</label><input type="text" name="Scountry" id="Scountry" size="30" maxlength="30"/></li> 
    <fieldset id="submit">
    	<input id="SubmitBtn" name="SubmitBtn" type="submit"  value="Proceed"/>

<script type="text/javascript">


Open in new window

Who is Participating?
kostantinos1995Connect With a Mentor Commented:
I'm sure I've got the solution, it's a sytax error:

ul li { display:block; float: left; wdith: 100% height: 1%;}

ul li { display:block; float: left; width: 100%; height: 1%;}

You have mistyped "Width" and are missing an ";"
Jason C. LevineNo oneCommented:
Hi newmie22,

Because this is a homework question, I have to answer in general terms to avoid doing your homework for you. Feel free to ask me follow-up questions based on this response, though :)

When you use list items along with labels and inputs, you are generating a lot of margins and padding. Each element in the cascade of tags:

input or textarea or whatever

has a default value for margin and padding. Furthermore, text elements have different defaults than do form elements. As a designer, you need to be aware this behavior and take steps to control it via your CSS definitions. Has your class covered the technique to make sure all elements on the page start with the same margin and padding?
newmie22Author Commented:
We didn't discuss anything on the page, the TA just went through and we copied down code.  We are mainly focused on php in this class and not the html so this page was given to us.  I don't know if i didn't copy something down correctly or not but i've gone through and kept changing fields in the css but never notice a difference in the alignment, other than that everything else looked alike.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Jason C. LevineNo oneCommented:
Dave BaldwinFixer of ProblemsCommented:
You have to use Internet Explorer to get it to line up.  Doesn't line up in Firefox, Safari, Chrome, or Opera.  But it does help to spell 'width' correctly.  There's two other details to fix but I'll let you find them.
Jason C. LevineNo oneCommented:
Technically the first answer given is correct (this is a CSS issue) but because of the EE regulations on homework questions, I can only answer vaguely.  I have no objection to deletion, though.
newmie22Author Commented:
I figured it out.  I am still new to coding so it was a pain to search and fine that ONE missing semi colon.  Thanks.
Dave BaldwinFixer of ProblemsCommented:
Good for you, I missed that.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.