validation errors adding images to mega menu

[bn17311]

hi,
adding images to my megamenu, if you hover over bikes you will see the images.

it looks ok for me but when i validate it with http://validator.w3.org/ it gives me errors

here is code ive added to give me image

$result .= '<div style="height: ' . MEGAMENU1_ICON_IMAGE_HEIGHT . 'px; margin: 0 auto;">' . zen_image(DIR_WS_IMAGES . $category['image'], 'View our Range of ' . $category['name'] . ' Bicycles ', MEGAMENU1_ICON_IMAGE_WIDTH, MEGAMENU1_ICON_IMAGE_HEIGHT) . '</div><div style="height: 50px; margin: 0 auto;">' . $category['name'] . '</div>'; 

errors i get include these

any help appreciated

thanks
bn17311

Line 213, Column 164: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

…style="height: 106px; margin: 0 auto;"><img src="images/cats/rbg09.jpg" alt="V…

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

and

Error Line 213, Column 371: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

…div><div style="height: 50px; margin: 0 auto;">12 Boys 3+Yrs</div></a></li><li>

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

[bn17311]

forgot to post test site

http://bicycles.stuff-4-sale.org/

[dbltoe]

<li class="submenu"><a href="/index.php?main_page=index&amp;cPath=1">BIKES</a>
                       <ul class="level2"><li>
<a href="http://bicycles.stuff-4-sale.org/index.php?main_page=index&amp;cPath=963"><div style="height: 106px; margin: 0 auto;"><img src="images/cats/rbg09.jpg" alt="View our Range of 12 Boys 3+Yrs Bicycles" title=" View our Range of 12 Boys 3+Yrs Bicycles " width="150" height="105" /></div><div style="height: 50px; margin: 0 auto;">12 Boys 3+Yrs</div></a></li><li> 

When looking at this code (and it is repeated man times on the page) I'm reminded of what my old open-faced reel would do from time to time. We called it a bird's nest.
You (or the template's creator) have tried to put items inside calls that cannot support them. You've created your own bird's nest by nesting a <div> inside an <a> tag.
Apparently, this was done to control the image sizes. Just not the proper way to do things. The <div> tag is meant to be a container that surrounds all the information pertaining to it. This might look like that's what it's doing but it would have to surround the entire <a> tag.
The better choice would be to use the <a> to define what you want. Go to http://tinyurl.com/nsocno8 and scroll down to the accepted answer. Great example of how to fix part of the problem. Make sure you don't wind up with <ul> or <il> tags inside the <a> as well.

[bn17311]

thanks now sorted

bn