Drop-down menus won't stay put when resized

[shanek]

I am using the drop down code provided here http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Used in conjunction with a graphic rollover button it works great and does exactly what I want except for one major problem...if I resize (zoom) the text/graphics on the browser page, the menus don't stay put under the corresponding trigger button. In other words, when I zoom the text, the drop down menu is hopping over to the right with each zoom in, and hopping to the left with each zoom out.

Is there an easy fix for this?

Here is the code that calls the menus:

<td width="1020" height="43" background="images/buttonbar_bg.jpg"><img src="images/spacer.gif" width="20" height="43"><img src="images/spacer.gif" width="220" height="43"><img src="images/spacer.gif" width="45" height="43"><a href="home.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/nav_home_over.jpg',1)"><img src="images/nav_home.jpg" alt="Home Page" name="home" width="78" height="43" border="0"></a><a href="#" class="menuanchorclass" rel="onstagemenu" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('onstage','','images/nav_onstage_over.jpg',1)"><img src="images/nav_onstage.jpg" alt="On Stage" name="onstage" width="104" height="43" border="0"></a><a href="#" class="menuanchorclass" rel="youthmenu" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('youth','','images/nav_youth_over.jpg',1)"><img src="images/nav_youth.jpg" alt="Youth Programming" name="youth" width="84" height="43" border="0"></a><a href="#" class="menuanchorclass" rel="aboutusmenu" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','images/nav_about_over.jpg',1)"><img src="images/nav_about.jpg" alt="About Us" name="about" width="105" height="43" border="0"></a><a href="#" class="menuanchorclass" rel="givesupportmenu" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('givesupport','','images/nav_give_over.jpg',1)"><img src="images/nav_give.jpg" alt="Support Persephone" name="givesupport" width="171" height="43" border="0"></a><a href="#" class="menuanchorclass" rel="contactusmenu" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/nav_contact_over.jpg',1)"><img src="images/nav_contact.jpg" alt="Contact Information" name="contact" width="124" height="43" border="0"></a><img src="images/spacer.gif" width="48" height="43"><img src="images/spacer.gif" width="20" height="43"></td>

Any help greatly appreciated?

[ddadmin]

How are you zooming in the text/graphics? Via native zooming in Firefox/ Opera (ie: pressing Ctrl +), or something else?

p.s: There's actually an easier way to enable the rollover effect on anchor links of the menu. Yo would just do something like:


<a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu4" data-image="http://mysite.com/out.gif" data-overimage="http://mysite.com/over.gif"><img src="http://mysite.com/over.gif" style="border-width:0" /></a>