Unable to Validate XHTML without breaking jQuery references

Question

Hello guys, my webpage is www.bodrum_dev.info (Remove the underscore character from two words).

I am trying to validate my page, but featured news section (that changes article headline and image on the left when mouse over to titles) generates 30 errors.

I know the reason. Because i have h1 h2 and div tags inside an a tag. So basically removing parent a tag and placing a tags inside h1 h2 and div probably would fix the issue. However, my template uses jquery to tell what to do when mouse overing, so editing my template breaking my page. And it simply does not behave correctly. How can i validate my page without breaking mouseover effects? Related files are below:

Following is my template:

<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>

Following is my jquery entries:

<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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
     $(document).ready(function() {
        $('.koseContent p').each(function(){
            $(this).css('marginTop',(52-$(this).height())/2);
        }).show();
    });
    </script>
<script type="text/javascript" src="/js/jquery.cycle.lite.1.0.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
// 
jQuery(document).ready(function(){
jQuery('table.RandomView').wrap("<div id='imageSwapper'></div>");
jQuery('table.RandomView').attr({align: "left"});
jQuery('table.RandomView').cycle({
    timeout:4000,
    speed:  1000,
    slideExpr: 'td div.sgWrap'
});
jQuery('table.RandomView tr').show();
});/* ]]> */
</script>

Following is my css:

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;
}

Answer 1

You really should fix the page, and then fix the jQuery code. I'd put the <a> tags inside the header tags, around the thumbnail image, and in that <span> (or whatever; it depends on what you want to be clickable). Then change the jQuery code so that it applies the "selected" style to the "newsWrap" div as a whole, and also change the CSS to look the way you want.

If you try to use bad HTML, you're going to find that browsers do weird things.

Answer 2

You can apply the mouseover effects to anything you like, so instead of declaring the effect like this:

jQuery(".newsWrap a").mouseover(function()

Apply the mouseover to another element, for example:

jQuery(".newsWrap h1").mouseover(function()

Or if you prefer:

jQuery(".newsWrap h1 a").mouseover(function()

Just remember to check that all the references inside those functions make sense (or apply to the correct elements).

MODIFIED CODE:

Affects H1 and H2 as requested.

Original:

jQuery(".newsWrap a").mouseover(function(){
    jQuery('.newsWrap a.selected').removeClass('selected');
    jQuery(this).addClass('selected');
});

Modified:

$(".newsWrap h1").mouseover(function() {
    $(".newsWrap h1.selected").removeClass("selected");
    $(this).addClass("selected");
});
$(".newsWrap h2").mouseover(function() {
    $(".newsWrap h2.selected").removeClass("selected");
    $(this).addClass("selected");
});

The first mouseover function affects all H1 elements inside div class .newsWrap, and second mouseover function affects all H2 elements inside div class .newsWrap.

There are more elegant ways to achieve what you're after but I've left it like this to keep things simple. If you want to affect all H1 and H2 tags on the page (not just those inside div class .newsWrap, simply remove the word .newsWrap from everywhere it occurs in the above.

Hope that helps.