Do you know how to fix this error?

[Invalid] Markup Validation of http://malesopranos.com/forums - W3C Markup Validator

I had a coder make a 'Latest Videos' module in my sidebar. However, he made one error ( it says 15 because there are 15 thumbnails. It's not really an error but it makes my site non-xhtml validated everywhere ).

I guess it's an easy fix but I know very little about this. Here's the template:

HTML Code:

<div class="videoBox">
<a href="$tube[link]"><div style="position: relative"><img width="60" height="45" alt="$tube[title]" src="$tube[link1img]" /><div style="position: absolute; width: 60px; height: 60px; top: 0px; left: 0px; background: url(/images/styles/sopranos/style/corners_vid.png) no-repeat;"></div></div></a>
</div>

Note that a dummy image is used to make thumbnails rounded and that's why there are two divs.

A <div> can't be put inside an anchor <a href="">.

So, try this :

HTML Code:

<div class="videoBox">
   <div style="position: relative">
      <a href="$tube[link]">
         <img width="60" height="45" alt="$tube[title]" src="$tube[link1img]" />
      </a>
      <div style="position:absolute;width:60px;height:60px;top:0px;left:0px;
         background: url(/images/styles/sopranos/style/corners_vid.png) no-repeat;">
      </div>
   </div>
</div>

or this :

HTML Code:

<div class="videoBox">
   <a href="$tube[link]">
      <img width="60" height="45" alt="$tube[title]" src="$tube[link1img]" />
   </a>
</div>

yup... you can't put a block-level element (the div) into an inline element (the a)


I think the best way to mark that up would be:

Code:

<div class="videoBox">
    <a href="$tube[link]" class="tubeanchor"><img src="$tube[link1img]" width="60" height="45" alt="$tube[title]" /></a>
</div> 


.tubeanchor {
    width: 60px;
    height: 60px;
    background: url(/images/styles/sopranos/style/corners_vid.png) no-repeat;
    padding: 7px 0;
    margin: 0;
    border: 0;
}

Obviously, place the CSS class into your MAIN CSS extras box (at the bottom), not in the template itself.

untested- might need a tweak.

Thanks to both of you !

Brian's solution would probably be cleanest if it'd work but for some reason the corners weren't smooth with it.

The solution below ( Shadab's first solution ) seems to work perfectly but I'd still like to use Brian's if he can figure out what's wrong with it since it's a bit cleaner.

HTML Code:

<div class="videoBox">
   <div style="position: relative">
      <a href="$tube[link]">
         <img width="60" height="45" alt="$tube[title]" src="$tube[link1img]" />
      </a>
      <div style="position:absolute;width:60px;height:60px;top:0px;left:0px;
         background: url(/images/styles/sopranos/style/corners_vid.png) no-repeat;">
      </div>
   </div>
</div>

Apparently, this solution above doesn't really work. it removes the link on the image, making it the thumbnails quite useless. I'm quite surprised I just noticed this now. Any suggestions?

Any way to remove the error without removing any functionality?

Last try .