PDA

View Full Version : Help me validate my HTML

screensaver400
2009-04-20, 22:03
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:
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:
<!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.
Brad
2009-04-20, 22:09
Remove the <br />s from your list. If you need a gap between items, add margin or padding to the CSS.

Removing those (specifically the ones outside the <li></li> tags) makes the code valid. If you can't use CSS for this bit due to email client stupidity, just be sure to keep the break tags inside the list item tags.
jdcfsu
2009-04-20, 22:15
You've got four BR tags outside the LI tags. Remove them or move them inside the LI and it'll validate. Also, you should move your text-indent styles from the added div's to classes added to the LIs or spans.

Brad beat me too it while I was playing with the code. :cool:
screensaver400
2009-04-20, 22:29
I got that far. It seems that if I remove all of the <br />s, the design gets completely ruined. Here's the code for that, in case I'm making a total dumbass mistake or something:
<!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>
<li><div style="text-indent: 1em"><a href="#">Line 2</a></div></li>
<li><span>9</span> <div style="text-indent: 2em"><a href="#">Line 3</a></div></li>
<li><span>9</span> <a href="#">Line 1</a></li>
<li><a href="#">Line 1</a></li>
<li><span>10</span> <div style="text-indent: 1em"><a href="#">Line 2</a></div></li>
<li><a href="#">Line 1</a><br /></li>
<li><span>10</span> <div style="text-indent: 1em"><a href="#">Line 2</a></div></li>
<li><span>11</span> <a href="#">Line 1</a></li>
<li><span>11</span> <a href="#">Line 1</a></li>
<li><span>12</span> <a href="#">Line 1</a></li>
</ul></div>
</body>
</html>

If I just move the four BR tags inside the LI tags, I get extra dotted lines. Here's that 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><br /></li>
<li><div style="text-indent: 1em"><a href="#">Line 2</a></div><br /></li>
<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><br /></li>
<li><span>10</span> <div style="text-indent: 1em"><a href="#">Line 2</a></div><br /></li>
<li><a href="#">Line 1</a><br /></li>
<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>

If you compare the code I originally posted with the second version (with the BR tags inside the LI tags), you can see the extra lines.

Any ideas?
Brad
2009-04-20, 23:07
Oh, now you made me go crack open a text editor. :p

Here's a cleaned up version that should work nicely for you. :) I used "green" for the background instead of your gif since, well, I don't have your gif.



<!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>SBCFRW Newsletter</title>
<style type="text/css">
ul#toc2 {
list-style-type: none;
width: 240px;
}
#toc2 li {
background: green;
repeat-x 0 0.85em;
}
#toc2 li a {
background: #fcfade;
}
#toc2 li span {
float: right;
background: #fcfade;
padding: 0 0 0 4px;
}
#toc2 li {
clear: both;
}
.level1 a, .level2 a, .level3 a {
padding: 0 0.3em;
}
.level2 a {
padding-left: 1.3em;
}
.level3 a {
padding-left: 2.3em;
}
</style>
</head>
<body>
<div id="content-toc2">
<ul id="toc2">
<li class="level1"><a href="#">Line 1</a></li>
<li class="level2"><a href="#">Line 2</a></li>
<li class="level3"><span>9</span><a href="#">Line 3</a></li>
<li class="level1"><span>9</span><a href="#">Line 1</a></li>
<li class="level1"><a href="#">Line 1</a></li>
<li class="level2"><span>10</span><a href="#">Line 2</a></li>
<li class="level1"><a href="#">Line 1</a></li>
<li class="level2"><span>10</span><a href="#">Line 2</a></li>
<li class="level1"><span>11</span><a href="#">Line 1</a></li>
<li class="level1"><span>11</span><a href="#">Line 1</a></li>
<li class="level1"><span>12</span><a href="#">Line 1</a></li>
</ul>
</div>
</body>
</html>

Arguably, instead of saying "level1, level2, etc", the subsections should actually be lists of their own, but the method I've used above keeps the markup relatively simple if you're planning to code it by hand.
screensaver400
2009-04-20, 23:51
I'm so new to all this, I keep feeling like I'm making a dumb mistake. I've never done anything quite like this before.

With my original (unvalidatable) code, I get this:
http://img179.imageshack.us/img179/6112/picture3o.png

When I take Brad's code and replace Green with my gif (which is 1x1px and grey), I get this:
http://img179.imageshack.us/img179/3042/picture2nru.png

Obviously the different fonts aren't a problem, but the line versus fill issue is a big one.
adamb
2009-04-21, 06:22
Theres a missing ':' here
#toc2 li {
background: green;
repeat-x 0 0.85em;


should be:
#toc2 li {
background: green;
repeat-x: 0 0.85em;
screensaver400
2009-04-21, 17:38
Adding the colon doesn't change the output for me at all.

Thinking outside the box... Is there another way to get this look, but with valid HTML?
Brad
2009-04-21, 18:30
Thinking outside the box... Is there another way to get this look, but with valid HTML?

Pure CSS like this? :)

http://i39.tinypic.com/240zokl.png

<!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>SBCFRW Newsletter</title>
<style type="text/css">
ul#toc2 {
list-style-type: none;
width: 240px;
}
#toc2 li {
repeat-x: 0 0.85em;
}
#toc2 li.withdots {
border-bottom: 1px dotted;
}
#toc2 li a {
background: #fcfade;
padding-bottom: 1px;
}
#toc2 li span {
float: right;
background: #fcfade;
padding: 0 0 1px 4px;
}
#toc2 li {
clear: both;
}
.level1 a, .level2 a, .level3 a {
padding: 0 0.3em;
}
.level2 a {
padding-left: 1.3em;
}
.level3 a {
padding-left: 2.3em;
}
</style>
</head>
<body>
<div id="content-toc2">
<ul id="toc2">
<li class="level1"><a href="#">Line 1</a></li>
<li class="level2"><a href="#">Line 2</a></li>
<li class="level3 withdots"><span>9</span><a href="#">Line 3</a></li>
<li class="level1 withdots"><span>9</span><a href="#">Line 1</a></li>
<li class="level1"><a href="#">Line 1</a></li>
<li class="level2 withdots"><span>10</span><a href="#">Line 2</a></li>
<li class="level1"><a href="#">Line 1</a></li>
<li class="level2 withdots"><span>10</span><a href="#">Line 2</a></li>
<li class="level1 withdots"><span>11</span><a href="#">Line 1</a></li>
<li class="level1 withdots"><span>11</span><a href="#">Line 1</a></li>
<li class="level1 withdots"><span>12</span><a href="#">Line 1</a></li>
</ul>
</div>
</body>
</html>

If you want a solid line instead of dots, modify the border-bottom attribute of the .withdots class. Try "lightgray 1px solid", for example.
screensaver400
2009-04-27, 02:14
Thanks so much for your help. It took me a few days (I wasn't working on this project exclusively) to get it integrated in with the rest of my HTML (I had some other errors that needed to be fixed), but it's in now.

I have just one more nit to pick...

The dotted lines in your code are a bit lower than mine--about two or three pixels lower. Is it possible to move them up, so that they line up with the text a bit better?

Thank you again.

EDIT: Oh, and I'm happy to say that the site, right now at least, uses completely valid HTML and CSS.
ast3r3x
2009-05-08, 17:41
transitional? the pros use strict :D
screensaver400
2009-05-08, 21:12
I'm not pro enough to know the difference, only that the rules vary depending on which is specified.

Care to give me a primer?
Brad
2009-05-08, 21:48
transitional? the pros use strict :D

"The pros" know that transitional has its place, too, and that adhering to the strict doctype doesn't really buy you anything other than ego. :p
ast3r3x
2009-05-09, 11:36
doesn't really buy you anything other than ego

Wanted to bold the important part for you haha :p
synotic
2009-05-17, 17:23
Wanted to bold the important part for you haha :pTo be fair, the one relevant difference between using transitional vs. strict document types is that they cause browsers to fork their rendering modes. What this basically means is that you may or may not get consistent rendering between different browsers. Or the browsers will try to compromise between browser differences. Wikipedia has a chart (http://en.wikipedia.org/wiki/Quirks_mode) which explains which document types trigger which rendering modes, but the real answer is that it's just too confusing (and not really possible) to keep in mind all the possible differences between the modes. I prefer to use the strict document types and then work around browser bugs for older browsers since I know that the base rendering I get from browsers like Safari and Firefox are what I can expect going forward.

If you want to really be confused you can read up on some of the XHTML vs. HTML controversy going on. At this point, it looks like the HTML supporters are the most convincing, but you'll want to read for yourself. The basic idea is that it's currently impossible to actually serve valid XHTML with an XML doctype. But including one breaks certain browsers. But if you don't include one, then your XHTML is just interpreted as broken HTML by the browser. They further argue that HTML isn't bad as long as you use HTML strict and stay validated. It also seems that there's more of a shift towards HTML 5 rather than XHTML 2.