Unexpected Character?

Hello all,

I am relatively new to HTML/CSS and believe I have discovered a glitch. I am currently following the Build your own web site the right way using HTML & CSS 2nd edition. When I typed up the code for the events page I came up with this. That “b” shouldn’t be there. Any ideas on what went wrong?

Many thanks,
Gerrit

Hi GerritB, welcome to the forums.

I take it you meant “d” not “b”.

The screenshot doesn’t show the tables’s mark-up, but my guess is that if you look there you’ll see a “d” that isn’t inside td tags. i.e. the browser doesn’t know where you want it so it dumps it out before it renders the table.

Whoops, yes I meant d.

Thank you! That did the trick! Can’t believe I missed that. This is where it was.

<td>Ocean &amp; Sports Diver Theory Course</td>d

Missing typos happens to everyone, even when using an IDE

If you get tired of typing the code, the files in the book’s 3rd edition code archive might save you some.
https://github.com/spbooks/HTML3/archive/master.zip

Thanks, that helped a lot, (though I only used it for figuring out what I was doing wrong, I learn better by doing it all by hand:) ) One more question, I added the code which it told me to using freedback.com. This is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Contact Us</title>
<meta http-equiv="Content-Type"
	content="text/html; charset=utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
	<div id="branding">
		<h1>BubbleUnder.com</h1>
	</div> <!-- end of branding -->
	<div id="tagline">
		<p>Bubble Under - The diving club for the south-west UK - Lets make a splash!</p>
	</div> <!-- end of tagline -->
	<div id="navigation">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="about.html">About Us</a></li>
			<li><a href="events.html">Club Events</a></li>
			<li><a href="contact.html">Contact Us</a></li>
			<li><a href="gallery.html">Image Gallery</a></li>
		</ul>
	</div>
</div> <!-- end of header-->
<div id="bodycontent">
	<h2>Contact Us</h2>
	<p>To let us know about a forthcoming dive event, please use the form below.</p>

	<form enctype="multipart/form-data" method="post" action="http://www.freedback.com/mail.php" accept-charset="UTF-8">
	<div>
		<input type="hidden" name="acctid" id="acctid" value="048regkeainaf1sh" />
		<input type="hidden" name="formid" id="formid" value="1221704" />
		<input type="hidden" name="required_vars" id="required_vars" value="name,email,field-df11912f085ca37,field-e569acb89447fb9,field-1829da2e91a0978,field-5ef5415f4fb0d6b" />
	</div>
		<fieldset>
			<legend>Tell us about a Dive Event</legend>
			<div>
				<label for="name" class="fixedwidth">Contact Name</label>
				<input type="text" name="name" id="name"/>
			</div>
			<div>
				<label for="field-a97e62073b83b9a" class="fixedwidth">Phone Number</label>
				<input type="text" name="field-a97e62073b83b9a" id="field-a97e62073b83b9a"/>
			</div>
			<div>
				<label for="email" class="fixedwidth">Email Address</label>
				<input type="text" name="email" id="email"/>
			</div>
			<div>
				<label for="field-df11912f085ca37" class="fixedwidth">What's the event called?</label>
				<input type="text" name="field-df11912f085ca37" id="field-df11912f085ca37"/>
			</div>
			<div>
				<label for="field-e569acb89447fb9" class="fixedwidth">When's the event happening?</label>
				<input type="text" name="field-e569acb89447fb9" id="field-e569acb89447fb9"/>
			</div>
			
			<div>
				<label for="field-1829da2e91a0978" class="fixedwidth">What region is the event in?</label>
				<select name="field-1829da2e91a0978" id="field-1829da2e91a0978">
					<option value="South-west">South-west</option>
					<option value="south-east">South-east</option>
					<option value="midlands">Midlands</option>
					<option value="central">Central</option>
					<option value="london">London</option>
					<option value="east">East</option>
					<option value="north">North</option>
					<option value="scotland">Scotland</option>
					<option value="northern ireland">Northern Ireland</option>
					<option value="wales">Wales</option>
					<option value="international (see details below)">International (see details below)</option>
				</select>
			</div>

			<div>
				<p>Please provide any other details you think will be useful to us in the text area below (it may save us calling or emailing you, and help avoid delays).</p>
				<label for="field-161226cc3707386" class="fixedwidth">More details (as much as you think we'll need!)</label>
				<textarea name="field-161226cc3707386" id="field-161226cc3707386" rows="6" cols="40"></textarea>
			</div>
			<div>
				<p>If we need to call you back for any more info, what would be the best time to call you on the number supplied?</p>
				<input type="radio" name="field-5ef5415f4fb0d6b" id="field-5ef5415f4fb0d6b_0" value="In the morning" /> 
				<label for="field-5ef5415f4fb0d6b_0">In the morning</label>
				<br/>
				<input type="radio" name="field-5ef5415f4fb0d6b" id="field-5ef5415f4fb0d6b_1" value="in the afternoon" />
				<label for="field-5ef5415f4fb0d6b_1">In the afternoon</label>
				<br/>
				<input type="radio" name="field-5ef5415f4fb0d6b" id="field-5ef5415f4fb0d6b_2" value="in the evening" />
				<label for="morning">In the evening</label>
				<br/>
				<input type="radio" name="field-5ef5415f4fb0d6b" id="field-5ef5415f4fb0d6b_3" value="no calls please" />
				<label for="field-5ef5415f4fb0d6b_3">No calls please</label>
			</div>

			<div>
				<p>Bubble Under may share information you give us here with other like-minded people or web sites to promote the event. Please confirm if you are happy for us to do this.</p>
				<input type="checkbox" name="field-6f387c68094014b[]" id="field-6f387c68094014b_0" value="Yes" />
				<label for="field-6f387c68094014b_0">I am happy for this event to be publicized outside of and beyond BubbleUnder.com, where possible</label>
			</div>

			<div class="buttonarea">
				<input type="submit" value="Send us the info."/>
			</div>
		</fieldset>
	</form>

	<p>If you need to get in touch urgently, please call Bob Dobalina on 01793641207. For anything else, please <a href="mailto:bob@bubbleunder.com">drop us a line by email</a>.</p>
</div> <!-- end of bodycontent-->
</body>
</html>

And relevent css

p {
  font-size: small;
  color: navy;
}

form.contact fieldset {   
  border: 2px solid navy;   
  padding: 10px; 
}  

form.contact legend {   
  font-weight: bold;   
  font-size: small;   
  color: navy;   
  padding: 5px; 
}

form.contact {   
  padding: 0;   
  margin: 0;   
  margin-top: -15px;
  line-height: 150%;
}

form.contact label {
  font-weight: bold;
  font-size: small;
  color: blue;
}

form.contact label.fixedwidth {   
  display: block;   
  width: 240px;   
  float: left; 
}

form.contact .buttonarea input {   
  background: navy;
  color: white;   
  font-weight: bold;   
  padding: 5px;   
  border: 1px solid white; 
}

form.contact .buttonarea {   
  text-align: center;   
  padding: 4px;   
  background-color: #0066FF; 
}

However when I look at the page it looks as if I don’t have any css in my page except for the p declaration. Any advice?

Thanks again.

I don’t see any tags with a class attribute of “contact”.

Thanks, once again… I cant belive I missed that…

Don’t let it bother you too much. It’s always something.

There’s a lot of things that go into making a web page.
The more and the longer you do it, the easier it gets to be able to figure out how to solve problems.

In fact, I’d say the main reason a lot of us here know about problems is because we’ve been there and made similar mistakes ourselves.

I guess Ill have to take your word for it for now, I’ll enjoy learning as much as I can :slight_smile: