I don't know if this is the right place for this question, but I am working through Eric Meyer on
CSS. Every once in a while I come across a statement to add to a project style that doesn't do anything. Most times I find that I have made a minor typo just before or in that statement, but this time I am stuck ... I can't find why it won't work.
I am doing project 7 which is styling a form, and the statement in question (input:focus {background: yellow;} ) is supposed to change the look of the focus element to a bright yellow. Can anyone see what is wrong? Here is the entire code:
- Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Register to Win!</title>
<style type="text/css" media="screen">
h1 {font-family: sans-serif; border-bottom: 0.1em solid #F33;
margin-bottom:0;}
td {padding: 0.25em 1px;}
td.lbl {font-weight: bold; text-align: right;}
tr.required td.lbl {background: #FFC; border-left: 0.5em solid red;}
/* a light red */
td.lbl {background: #CFC; border-left: 0.5em solid green;}
div#submitArea {text-align: center; margin-top: 1em; padding-top:
1em;}
input:focus {background: yellow;}
</style>
</head>
<body>
<form action="somescript.cgi">
<h1>Register to Win!</h1>
<table cellspacing="0">
<tr class="required">
<td class="lbl">First name:</td>
<td class="inp"><input type="text" name="userFName" size="60"
maxlength="100"></td>
</tr>
<tr class="required">
<td class="lbl">Last name:</td>
<td class="inp"><input type="text" name="userLName" size="60"
maxlength="100"></td>
</tr>
<tr class="required">
<td class="lbl">E-mail address:</td>
<td class="inp"><input type="text" name="userEmail" size="60"
maxlength="100"></td>
</tr>
<tr class="required">
<td class="lbl">State of residence:</td>
<td class="inp"><select name="userState">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
</select>
</td>
</tr>
<tr class="required">
<td class="lbl">Zip code:</td>
<td class="inp"><input type="text" name="userZip" size="20"
maxlength="20"></td>
</tr>
<tr>
<td class="lbl">Age:</td>
<td class="inp">
<input type="radio" name="userAge" value="18-24">18-24
<input type="radio" name="userAge" value="25-34">25-34
<input type="radio" name="userAge" value="35-49">35-49
<input type="radio" name="userAge" value="50-64">50-64
<input type="radio" name="userAge" value="65+">65+
</td>
</tr>
<tr>
<td class="lbl">Education:</td>
<td class="inp">
<input type="radio" name="userEdu" value="HS">High school
<input type="radio" name="userEdu" value="BABS">BA/BS
<input type="radio" name="userEdu" value="Mast">Masters
<input type="radio" name="userEdu" value="PhD">Ph.D.
<input type="radio" name="userEdu" value="other">other
</td>
</tr>
<tr>
<td class="lbl">Interests:</td>
<td class="inp">
<input type="checkbox" name="userIntr" value="camping">Camping
<input type="checkbox" name="userIntr" value="sports">Sports
<input type="checkbox" name="userIntr" value="movies">Movies
<input type="checkbox" name="userIntr" value="music">Music
<input type="checkbox" name="userIntr" value="books">Books
<input type="checkbox" name="userIntr" value="photo">Photography
<input type="checkbox" name="userIntr" value="other">other
</td>
</tr>
</table>
<div id="submitArea">
<input type="submit" value="Enter me to win!"><br />
Fields highlighted with red labels <strong>must</strong> be filled
in.
</div>
</form>
</body>
</html>
Please help. I am getting a bit frustrated.
styling forms
Aug 29th, 2007, 19:58
styling forms
It won't work in IE6 and 7 'cause it doesn't support it
Similar Threads
