p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: Beginning HTML, XHTML, CSS, and JavaScript (http://p2p.wrox.com/forumdisplay.php?f=541)
-   -   More problems with css (http://p2p.wrox.com/showthread.php?t=83029)

crashbandicoot March 23rd, 2011 07:49 AM

More problems with css
 
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.

bitnap March 23rd, 2011 07:56 AM

Hi, It looks like it might be the selector on this rule:

label for {
width:170px;
float:left;
text-align:right;
clear:both;
margin-bottom:10px;}

If you change the selector on this rule to the following (remove 'for' after the word label):

label {
width:170px;
float:left;
text-align:right;
clear:both;
margin-bottom:10px;}

Hopefully that will fix it.

bookreader_rap March 23rd, 2011 05:34 PM

Also,

this:

Code:

.submit {
cursor:pointer;}

Needs to be

Code:

.submit input {cursor:pointer;}


All times are GMT -4. The time now is 02:44 PM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.