I'm having some more problems with css. In the Try it out section in Chapter 10:Design Issues, of "Beginning HTML, XHTML, CSS and JavaScript" I've done the html code exactly how it is done in the book, and the css stylesheet exactly how it is in the book, and yet, the input boxes and labels are all over the place. The following is the html code:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Try It Out</title>
<link rel="stylesheet" type="text/css" href="registration.css">
</head>
<body>
<form name="frmExample" action="register.aspx" method="post">
<fieldset>
<legend>Register with us:</legend>
<label for="fname">First name: <span class="required">*</span></label>
<div class="input">
<input type="text" name="txtFirstName" id="fname" size="12">
</div>
<label for="lname">Last name: <span class="required">*</span></label>
<div class="input">
<input type="text" name="txtLastName" id="lname" size="12">
</div>
<label for="email">E-mail address: <span class="required">*</span></label>
<div class="input">
<input type="text" name="txtEmail" id="email" size="20">
</div>
<label for="pwd">Password: <span class="required">*</span></label>
<div class="input">
<input type="password" name="txtPassword" id="pwd" size="12">
<span class="small"> must be between 6 and 12 characters long</span>
</div>
<label for="pwdConf">Confirm password: <span class="required>*</spann></label>
<div class="input">
<input type="password" name="txtPasswordConf" id="pwdConf" size="12">
</div>
<div class="submit"><input type="submit" value="Register"></div>
<span class="required">*</span> = required
</fieldset>
</form>
</body>
</html>
And the following is the css code:
body {
color:#000000;
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-wight:bold;
font-size:100%;}
fieldset {
padding:10px;
width:550px;}
label for {
width:170px;
float:left;
text-align:right;
clear:both;
margin-bottom:10px;}
.input {
width:350px;
float:left;}
input {
border-style:solid;
border-color:#666666;
border-width:1px;
background-color:#f2f2f2;
font-size:100%;}
input:focus {
border-style:solid;
border-color:#333333;
border-width:1px;
background-color:#ffffcc;}
.submit {
clear:both;
margin-left:170px;}
.submit {
cursor:pointer;}
.small {font-size:10px;}
.required {
font-weight:bold;
font-size:20px;
color:#ff000000;}
If you could tell me where I went wrong I'd be grateful.
More problems with css
