Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning HTML, XHTML, CSS, and JavaScript
This is the forum to discuss the Wrox book Beginning HTML, XHTML, CSS, and JavaScript by Jon Duckett; ISBN: 978-0-470-54070-1
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning HTML, XHTML, CSS, and JavaScript section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old March 23rd, 2011, 07:49 AM
Authorized User
Points: 128, Level: 2
Points: 128, Level: 2 Points: 128, Level: 2 Points: 128, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Feb 2011
Posts: 25
Thanks: 2
Thanked 1 Time in 1 Post
Default 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.
Reply With Quote
  #2 (permalink)  
Old March 23rd, 2011, 07:56 AM
Authorized User
Points: 105, Level: 2
Points: 105, Level: 2 Points: 105, Level: 2 Points: 105, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Sep 2010
Posts: 19
Thanks: 0
Thanked 4 Times in 4 Posts
Default

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.
Reply With Quote
  #3 (permalink)  
Old March 23rd, 2011, 05:34 PM
Registered User
 
Join Date: Feb 2011
Posts: 6
Thanks: 2
Thanked 1 Time in 1 Post
Default

Also,

this:

Code:
.submit {
cursor:pointer;}
Needs to be

Code:
.submit input {cursor:pointer;}
Reply With Quote
The Following User Says Thank You to bookreader_rap For This Useful Post:
crashbandicoot (April 4th, 2011)
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problems with CSS crashbandicoot BOOK: Beginning HTML, XHTML, CSS, and JavaScript 3 March 22nd, 2011 09:49 AM
page 221 - problems with Monochrome and dark grey css sarala BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 7 April 16th, 2010 02:35 AM
CSS - editing the css style sheet doesn't take effect immediately sayo ASP.NET 3.5 Basics 6 March 13th, 2009 02:32 AM
CSS HELP:! CSS EXPANDIBLE BACKGROUND FOR TITLE phpuser2000 CSS Cascading Style Sheets 2 December 19th, 2007 12:36 AM
Rich's new CSS book: Beginning CSS 2nd Edition jminatel BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 0 June 15th, 2007 11:55 AM



All times are GMT -4. The time now is 02:14 AM.


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