View Full Version : Could somebody peek at this code from my CSS book?

06-20-2006, 07:36 AM
I am trying to learn CSS for overall design purposes, and I am sort of swimming through a book called Bulletproof Web Design by Dan Cederholm.

On pp.28-32, he shows how CSS can make a clickable tab set for navigation that is text-based and scalable. I went through and typed up the code myself to try it out, and it came up correct, except for one detail: spaces in the text inside the <a> tags resulted in line breaks, whereas the author intended, as his illustrations show, that all the text would remain on the same line, as of course he'd want it to be for tabs...

I've checked my code, and the style rules exactly as the author wrote it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Scalable Navigation</title>
<style type="text/css">
body {
#nav {
float: left;
background-color: FFCB2D;
width: 100%;
margin: 0px;
padding: 10px 0 0 46px;
list-style: none;
#nav li {
float: left;
margin-top: 0px;
padding: 0;
font-size: 55%;
#nav a {
float: left;
display: block;
margin: 0 1px 0 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
background: #F9E9A9



<ul id="nav">
<li id="t-intro">Introduction (/)
<li id="t-about">About Lance (about.html)
<li id="t-news">News &amp; Events (news.html)
<li id="t-sponsors">Sponsors (sponsors.html)

Could anyone tell me why the author's result has no line breaks on the tab text and mine does? Maybe it's my browser? (Safari 2.0.3)



06-20-2006, 07:45 AM
I just realized that my browser isn't the issue... I'm still only looking at the results in Design View...


06-20-2006, 09:28 AM
well there are a few errors in the CSS code:

when the padding value is zero you still need to put px next to the figure.

and on #nav a you are missing a ";" from background

06-20-2006, 12:47 PM
I just realized that my browser isn't the issue... I'm still only looking at the results in Design View...

You should always test in more than one browser. Download Firefox and Netscape and edit the browser list in Dreamweaver.

Beyond that, use http://www.w3.org and validate your CSS and HTML with their validation tools.