List Background

HTML & CSS
1

Looking through Art and Science of CSS, and trying to follow along with example in the “Navigation” chapter.
Their example appears to have a brown background (box) but mine does not. Here is what I have

html>
<title>DIVISION EXPERIEMENT</title>
<head>

<style type=“text/css”>

html {
font: small/1.4 “Lucida Grande” Tahoma, sans-serif;
}

body {
font size: 92%;
}

#nav {
margin: 0;
padding: 0;
backgound: #6F6146;
list-style-type: none;
width: 180px;

}

#nav li {
margin: 0;
padding: 0;
}

#nav a {
display: block;
color: red;
text-decoration: none;
padding: 0 15px;
line-height: 2.5;
border-bottom: 1px solid #000;
}

#nav #nav_con a [
border: none;
}
#nav a: hover {
background: #4F4532;
}

</style>

</head>

<body>

<ul id=“nav”>
<li id=“nav_hom”><a href=“/”>Home</a></li>
<li id=“nav_map”><a href=“/”>Maps</a></li>
<li id=“nav_jou”><a href=“/”>Journals</a></li>
<li id=“nav_his”><a href=“/”>History</a></li>
<li id=“nav_ref”><a href=“/”>References</a></li>
<li id=“nav_con”><a href=“/”>Contact</a></li>
</ul>

</body>
</html>

2

In the code you’ve given above, you’re missing the “r” of background here:

#nav {
margin: 0;
padding: 0;
[COLOR="#FF0000"]backgound[/COLOR]: #6F6146;
list-style-type: none;
width: 180px;

}
3

Thank you. That was really stupid on my part…

4

It’s actually a common stupidity, happens all the time and it’s always the small stuff people overlook.

5

In this case I would think about running code through a validator to aviod situations like these :slight_smile:

jigsaw.w3.org/css-validator

Validating is the first step to debugging!

6

Easy Fix there. Smiley Face. :slight_smile:

7

What was the issue?

Glad you got it fixed :).