I have a vertical menu on my site (i.e. top to bottom) that uses table rows for each menu element.
When a user mouses over each menu item, I have a submenu appear as a DIV (initially this div is hidden).
To stop the submenu div breaking the page flow, I made it absolute, so it floats over everything. But because my site is centred, I never know the exact position of the menu, so I have used the trick of putting the absolute div inside a relative div:
isplay = 'none';" valign="middle">
<div style="position: relative;">
">Main menu link</a>
<div id="submenu1" style="display: none; position: absolute; top: 0px; left: 140px;">Submenu HTML here</div>
This works fine except the submenu div is positioned differently in IE and Firefox...
Is there a way to do this that will make the submenu div appear in the same place in both IE and Firefox? I am pregenerating the menu html and saving it in a database, otherwise I could have done a browser detect and changed the top amd left attributes of the absolute div for each browser.