Help me validate my HTML

Discussion in 'Web Design and Development' started by screensaver400, Apr 20, 2009.

  1. screensaver400 macrumors 6502a

    Jan 28, 2005
    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" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href ="style.css" rel="stylesheet" type="text/css"/>
    <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>
    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.
  2. Me1000 macrumors 68000


    Jul 15, 2006
    remove the line breaks after the closing list item tags and it will validate
  3. Darth.Titan macrumors 68030


    Oct 31, 2007
    Austin, TX
    ...or if you need the line breaks for extra spacing, put them before the closing tag of the list item. That too should allow validation.
  4. Dunmail macrumors regular

    Mar 27, 2009
    Skipton, UK
    Better to remove the line breaks and use the CSS line-height property for spacing. However it looks like the OP is using the br tag more as a place holder for the clear: both property. I think it's possible to apply that to the li tag. It would make the markup a bit clearer.

Share This Page