[SOLVED] HTML validation problem

[spike]

to put it mildly - validation problem with my vertical navigation
http://www.inkwire.de/business-guide.html
white on blue headers in the navigation are defined as section headers, (maybe I'm thinking wrong) the html validation indicates they should be defined as classes. I don't seem to be able to get my head round this one.
Template:

{if $count > 0}

{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}

{if $node->current == true}
Die aktuelle Seite ist {$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader' and $node->parent == true}
{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->hierarchy}: {$node->menutext}

{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}

{/if}

{/foreach}
{repeat string="" times=$node->depth-1}

{/if}

Stylesheet

@charset "UTF-8";
/**
* Vertical Navigation
*/
@media all
{
 #submenu {
   width: 100%;
   overflow: hidden;
   margin: 0 0 1em 0;
   list-style-type: none;
   font-size: 92%;
   border-top: 0px #ddd solid;
   border-bottom: 0px #ddd solid; }
 #submenu ul { list-style-type: none; margin:0; padding: 0; }
 #submenu li { float:left; width: 100%; margin:0; padding: 0; line-height: 1.5em; border-bottom: 1px #ddd solid;}
 #submenu li a,
 #submenu li #active,
 #submenu li #sectionheader { text-decoration: none; display: block;  border-right: none; width: 100%;  font-weight: bold; padding: 0.4em 0 0.3em 6%; background: navy; color: #fff; }
 #submenu li a.activeparent,
 #submenu li #active { font-weight: bold; }
 /* Level 1 */
 #submenu li a,
 #submenu li #active,
 #submenu li a  {width: 100%; padding: 3px 0px 2px 6%; font-weight: bold; background: #fff url(../images/cms/arrow-right.gif) no-repeat 1% center; color: #000; }
 #submenu li #active {background: red url(../images/cms/arrow-right-active.gif) no-repeat 0% center; color: #fff; }
 #submenu li a.activeparent,
 #submenu li a:focus,
 #submenu li a:hover,
 #submenu li a:active { background-color: #d0d0d0; color: #000; }

}

any tips much appreciated - my brain 'urts
gruss - spike

[Dr.CSS]

Every ID has to be unique, only one per page, change it to a class...

[spike]

Thanks Doc - if yer ever in the neighbourhood - the beers on me!
That's what I figured - but every time I changed the template from id to class I managed to screw up the style sheet - what did I do? I took out "#" but didn't replace it with "."
Where's the hat for the nerd of the day I'll wear it til midnight.
muchos gracious for the kick in the butt.
gruss - spike