Help me validate my HTML

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

  1. screensaver400 macrumors 6502a

    Joined:
    Jan 28, 2005
    #1
    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:
    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.
     
  2. Me1000 macrumors 68000

    Me1000

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

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #3
    ...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

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #4
    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