Hello Anyone,
I encoded this in my css file and it did not do anything (no border and background color appear).
#navigation {
width: 180px;
border: 1px dotted navy;
background-color: #7da5a8
}
I am using the book Build Your Own Web Site the Right Way Using HTML & CSS. My OS is Window 7 and I am using IE8. I noticed at the time the book was written, the newest OS mentioned was VISTA. Please advise, anyone!
Thank you.
Nothing wrong with the css, so it is probably in your html that there is an error.
Operating system with not affect things at all.
upload your page etc to your web space so we can see all the code.
Thank you Dr. John for responding to my question. Please see below encodings.
<!DOCTYPE html PUGLIC “-//W3C//DTD XHMTL 1.0
Strict//EN” “http://www.w3.org/TR/xhtmll/DTD/xhtmll-
strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>About Buble Under: who we are, what this site is for</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=“site branding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=“tagline”>
<p>Diving club for the south-west UK - let’s make a splash!</p>
</div>
</div> <!-- end of header div –>
<div id=“navigational”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About Us</a></li>
<li><a href=“contact.html”>Contact Us</a></li>
</ul>
</div> <!–end of navigational–>
<div id=“bodycontent”>
<h2>About Us</h2>
<p>Bubble Under is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the whether is good and the bacon rolls are flowing. We arrange weekends away as small groups to the costs of accomodation and travel and to ensure everyone get a trustworthy dive buddy.</p>
<p>Although we’re based in the south-west, we don’t stay on our own turf: past diving weekends away have included trips up to Scapa Flow in Scotland and to Malta’s numerous wreck sites.</p>
<p>When we’re not diving, we often meet up in a local pub to talk about our recent adventures (<em>any</em> excuse, eh?).</p>
<p>Or as our man Bob Dobalina would put it:</p>
<blockquote class=“fun”>
<p>“Happiness is a dip in the ocean followed by a pint or two of Old speckled Hen. You can quote me on that!”</p>
<p>“Join us for a weekend away at some of our favorite dive spots and you’ll soon be making new friends.”</p>
<p>“Anyway, about time I got on with some <em>proper</em> work!”</p>
</blockquote>
</div> <!–end of body content div–>
</body>
</html>
Hello Dr. John
I am also sending you my css file (encoding) for the related question. Please see below.
/*
CSS for Bubble Under Site
*/
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
padding: 15px;
line-height: 125%;
border: 4px solid navy
}
h1 {
font-family: “Trebuchet MS” ; Helvetica, Arial, sans-serif;
font-size: x-large;
}
li {
font-size: small;
}
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
p {
font-size: small;
color: navy;
}
em {
font-style: normal;
text-transform: uppercase;
}
#tagline p{
font-style: italic;
font-family: Georgia, Times, serif;
}
h1, h2, h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
blockquote.fun {
font-style: italic;
}
#navigation {
width: 180px;
border: 1px dotted navy;
background-color: #7da5a8;
}
a:visited {
color: navy;
}
#tagline p {
font-style: italic;
font-family: Georgia, Times serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
}
h1,h2,h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
}
h1 {
font-size: x-large;
background-color: navy;
color: white;
}
h2 {
color: navy;
font-size: 130%;
font-weight: normal;
}
You have a spelling mistake in the DOCTYPE it should be PUBLIC not PUGLIC.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Also an erroneous ID <div id=“site branding”> it should be called <div id="sitebranding"> with no space.
Also within the CSS: font-family: “Trebuchet MS” ; Helvetica, Arial, sans-serif;
Should be: font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
Also on line 94: font-family: Georgia, Times serif; should be font-family: Georgia, Times, serif; you forgot the comma.
But the culprit is probably you misspelt the ID navigation <div id=“navigational”> should be <div id="navigation"> so change the spelling to navigation and that part will work. 
Yep! I was hoping someone had replied back already or I was about to mention the mispelling in the first line and the “navigationAL” versus “navigation” error.
I didn’t catch the other stuff. It is fun to try to help people find out what went wrong.
espi62: It is easy to look over things like this. You just gotta make sure you take your time and look at every single thing to find the problem. If you do not make the correct reference to your CSS in your HTML then it won’t work, so a small error in lettering will mess everything up. It’s easy to do when you’ve been coding all day or something and are tired, lol.
Excellent! Thank you very much guys. It worked!