views:

26

answers:

0

I am having a div positioned as a menu drop down.The div is positioned absolute and given left, right, top and bottom positioning to keep it in the exact position. On zooming the browser, the div is moved away from the actual position. Can anyone help me out to solve this issue?

<script>

     var leftSubMenuHolder = '';
                var topSubMenuHolder = '';
                function MakePosition(element)
                {              
                    var elementToPosition = element.closest("div.clsElementToPosition");
                    var leftPosition = elementToPosition.position().left;
                    var topPosition = elementToPosition.position().top;
                    var divWidth = elementToPosition.width() - 90; 

                    leftSubMenuHolder = leftPosition;
                    topSubMenuHolder = topPosition + 29;
                    $("#divSubMenuHolder").css({top: topSubMenuHolder, left: leftSubMenuHolder,width:divWidth}); 
                }
    </script>

    <html>

     <div id="divTopBar" class="clsElementToPosition">
                                                <table width="100%" cellpadding="0" cellspacing="0" height="100%">
                                                    <tr height="1">
                                                        <td>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div style="float: left; width: 5px">
                                                            </div>
                                                            <div id="divMenuContainer" style="float:left">                                                 
                                                            </div>
                                                            <div id="divSubMenuHolder" style="clear:left;position:absolute">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>

    </html>