1. <div class="newsWrap"><ul><li>
           <a href="[ARTICLELINK]">
                             <h1 style="height: 90px;"><img border="0" src="/DesktopModules/DnnForge%20-%20NewsArticles/Headline.ashx?c=[CUSTOM:MANSET]&amp;fc=[CUSTOM:COLOR]" alt="[TITLE]" /></h1>
             <h2 style="margin-top: 28px;margin-left: 5px;">[HASSUMMARY][SUMMARY][/HASSUMMARY][HASNOSUMMARY][DETAILS:150][/HASNOSUMMARY]</h2>
             <div class="laImage">[IMAGETHUMB:200:265]</div>
             <span>[TITLE]</span>
               </a>
       </li></ul></div>
   
   
   
   
   
   
   

Hello guys, i am using the template above to generate featured news section of my website ( http://www.bodrum__dev_info) Remove double underscore between bodrum and dev, and replace single underscore with .

As you see h1, h2 and div tags placed inside an anchor tag which causes invalid xhtml, since i have ten articles this template generates about 30 xhtml validation errors.

Template uses following css:

1. div.newsWrap {
       width:493px;
       height:410px;
       margin:0 10px;
       position:relative;
   
   
   overflow:hidden;
       background-color:#fff;
   }
   div.newsWrap li{
       height:16px;
       margin-bottom:12px;
       background:
   
   url(images/mandalina.gif) bottom left no-repeat scroll;
   }
   /* Element position */
   div.newsWrap div.laImage {
       display:none;
   
   
   position:absolute;
       top:130px;
       left:0;
       width:250px;      /* This and the overflow will crop the image */
   
   
   overflow:hidden;
   }
   div.newsWrap h1 {
       display:none;
       position:absolute;
       top:0;
       left:0;
       height:40px;
   
   
   overflow:hidden;
       padding:5px 0 0;
       white-space:nowrap;
   }
   div.newsWrap h2 {
       display:none;
       position:absolute;
   
   
   top:60px;
       width:493px;  /* Required for IE6 */
       left:0;
       height:50px;
       overflow:hidden;
       padding:0;
   }
   div.newsWrap ul{
   
       padding-left:5px;
       padding-right:5px;
       margin-left:205px;
       margin-top:130px;
       width:500px;
   }
   
   
   /* Font styling */
   div.newsWrap li,div.newsWrap h2{
       font-family:Arial,Helvetica,sans-serif;
       font-size:12px;
       font-weight:normal;
       line-height:13px;
       color:#000;
   }
   div.newsWrap h2{
       font-weight:bold;
       text-transform:uppercase;
   }
   div.newsWrap h1 {
       font-family:impact,Arial,sans-serif;
       font-size:30px;
       letter-spacing:-1px;
       line-height:40px;
       margin:0 auto;
       text-transform:uppercase;
       white-space:nowrap;
   }
   div.newsWrap li a{
       color:#000;
       padding-left:21px;
       font-weight:bold;
   
   
   text-decoration:none;
       text-transform:uppercase;
   }
   div.newsWrap li a:link,div.newsWrap li a:visited {
       text-decoration:none;
   
   
   color:#000;
   }
   /*
    * This section reveals the strapline, summary and image for the hovered title
    * The hover acts as a
   
   fallback, the real hover class is set by the selected class
    */
   div.newsWrap li a:hover div,div.newsWrap li a.selected
   
   div,div.newsWrap li a:hover h1,div.newsWrap li a.selected h1,div.newsWrap li a:hover h2,div.newsWrap li a.selected h2 {
   
   
   display:block;
   }
   div.newsWrap li a:hover span {
       text-decoration:underline;
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Well, and finally i have following jquery on skin file...

1. <script type="text/javascript">
   jQuery().ready(function() {
       jQuery(".newsWrap a:first").addClass('selected');
       jQuery(".newsWrap a").mouseover(function(){
           jQuery('.newsWrap a.selected').removeClass('selected');
           jQuery(this).addClass('selected');
       });
   });
   </script>
   
   
   
   
   
   
   
   

If i replace my template like below:

1. <div class="newsWrap"><ul><li>
           
                             <h1 style="height: 90px;"><a href="[ARTICLELINK]"><img border="0" src="/DesktopModules/DnnForge%20-%20NewsArticles/Headline.ashx?c=[CUSTOM:MANSET]&amp;fc=[CUSTOM:COLOR]" alt="[TITLE]" /></a></h1>
             <h2 style="margin-top: 28px;margin-left: 5px;"><a href="[ARTICLELINK]">[HASSUMMARY][SUMMARY][/HASSUMMARY][HASNOSUMMARY][DETAILS:150][/HASNOSUMMARY]</a></h2>
             <div class="laImage"><a href="[ARTICLELINK]">[IMAGETHUMB:200:265]</a></div>
             <span><a href="[ARTICLELINK]">[TITLE]</a></span>
               
       </li></ul></div>
   
   
   
   
   
   
   

It validates however featured news section does not work correctly, so how can i improve my jquery and template to make featured news section work and validate correctly?

Thank you.