<UL> image nav

[herrjosua]

Hello

I do not know if this the right forum for this question but here it goes. I am currently working on a redesign of my portfolio website. My current website is XHTML 1.0 Transitional, while the redesign one is going to be XHTML 1.0 Strict. My UL nav was created using images. The code below is how my current website nav works. When I tried to reuse and validate my UL nav code on my redesigned website I received an error message stating that: "The tag:"a" is not allowed within: "ul" It is only allowed within: abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins, k. . ..[XHTML 1.0 strict]". When I removed the "a" code and ran the validation tool again I get this error message: "The tag:"img" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict]". So how would I create a UL nav with my images within the XHTML 1.0 strict?

Here is the code from my current website:

CSS

#nav{
margin:0;
padding:0;
}

ul#nav a img {height:30px; width:133px;border-width:0; background-color:#FFFFFF no-repeat; margin-top:0px; margin-bottom:5px; margin-left:10px; margin-right:10px;}

ul#nav_splash a img {height:38px; width:146px; border-width:0; background-color:#FFFFFF no-repeat top left; margin-left:100px; margin-right:100px}

*html a img {height:30px; width:133px; border-width:0; background-color:#FFFFFF no-repeat; margin-top:1px}

ul#nav a#DemoReel img {background-image: url(../images/buttons/dr_button_normal.gif);}

ul#nav a#DemoReel:hover img {background-image: url(../images/buttons/dr_button_over.gif);}

ul#nav a.currentDemoReel img {background-image: url(../images/buttons/dr_button_over.gif);}

HTML

<div id="left_nav">

<ul id="nav">

<a id="DemoReel" href="demoreel.html"><img src="images/buttons/blank.gif" alt="Demo Reel"></a>
<!--<href="#" class="currentDemoReel"><img src="images/buttons/blank.gif" alt="Demo Reel"></a>-->

</ul>

</div>

Thanks
Josh

[phranque]

the anchor element must be within <li> tags:
<ul>
<li>
<a href="...>...</a>
</li>
</ul>

[herrjosua]

How could I convert the code provided to use images as my nav uses an image with the id of "demoreel". Where would the code for my image fit within that structure?

<id="DemoReel"><img src="images/buttons/blank.gif" alt="Demo Reel">