I've been doing most of my web design work so far using tables. Hold on now, don't start yelling. I needed to because it has actually been intended for HTML email newsletters. Most email clients have limited support for CSS, at best.
But now I'm working on a web version of the design, and I'm running into trouble with a table of contents I put together with the help of various tutorials. This is my first layout using CSS, and I'm very pleased so far. Unfortunately, I have ran into a hiccup.
First, here's the relevant CSS:
Now, here's my HTML:
This works perfectly. However, it doesn't validate as proper HTML using the W3C validator. If I let the W3C validator fix it with HTML Tidy, I get the dotted lines on each line. This obviously isn't what I want.
So, how can I make this validate without breaking it? The validator's explanation wasn't too useful, I'm afraid.
But now I'm working on a web version of the design, and I'm running into trouble with a table of contents I put together with the help of various tutorials. This is my first layout using CSS, and I'm very pleased so far. Unfortunately, I have ran into a hiccup.
First, here's the relevant CSS:
Code:
ul#toc2 {
list-style: none;
width: 240px;
}
#toc2 li {
background: url(dot.gif)
repeat-x 0 0.85em;
}
#toc2 li a {
float: left;
background: #fcfade;
padding: 0 4px 0 5px;
}
#toc2 li span {
float: right;
background: #fcfade;
padding: 0 0 0 4px;
}
#toc2 li br {
clear: both;
}Now, here's my HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>
<link href ="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content-toc2">
<ul id="toc2">
<li><a href="#">Line 1</a></li><br />
<li><div style="text-indent: 1em"><a href="#">Line 2</a></div></li><br />
<li><span>9</span> <div style="text-indent: 2em"><a href="#">Line 3</a></div><br /></li>
<li><span>9</span> <a href="#">Line 1</a><br /></li>
<li><a href="#">Line 1</a></li><br />
<li><span>10</span> <div style="text-indent: 1em"><a href="#">Line 2</a></div><br /></li>
<li><a href="#">Line 1</a></li><br />
<li><span>10</span> <div style="text-indent: 1em"><a href="#">Line 2</a></div><br /></li>
<li><span>11</span> <a href="#">Line 1</a><br /></li>
<li><span>11</span> <a href="#">Line 1</a><br /></li>
<li><span>12</span> <a href="#">Line 1</a><br /></li>
</ul></div>
</body>
</html>This works perfectly. However, it doesn't validate as proper HTML using the W3C validator. If I let the W3C validator fix it with HTML Tidy, I get the dotted lines on each line. This obviously isn't what I want.
So, how can I make this validate without breaking it? The validator's explanation wasn't too useful, I'm afraid.
