Sub menu offset that I do not want

dav · Post by **dav** » Wed Dec 27, 2006 2:05 pm

Hello, If I place a menu inside a table I am getting a strange sub menu offset. They appear a few pixels below the main menu in IE6 and 7 but they appear almost correctly in Firefox.

I want the sub menu's to drop down from the bottom border of the top menu not a few pixels below it.

How can I fix this?

Here is an URL to an example of what I mean view it in IE 6 or 7 and you'll know what I mean.

http://gonegothic.com/_test/milonic/index.htm

Also I did a test by replacing my menu code with one of your samples and I got exactly the same problem. Take a look.

http://gonegothic.com/_test/milonic/index2.htm

dav · Post by **dav** » Wed Dec 27, 2006 2:17 pm

Oh and another thing. I noticed that the menus appear to wobble slightly in IE if you hover over a menu item containing a link. I managed to fix this in Firefox because I realised that using a global style sheet to style all "a" tags was somehow being applied to my menu for a split second, So I added "a.menucss" to my style sheet to style each "a" tag within my menu, which worked for Firefox... I stopped seeing the little wobble, but it has not resolved the issue in IE.

I noticed after a few hovers over my menu in IE that the links in the menu become styled by the css "a" style then reverted to the css "a.menucss" style after half a second.

It creates an effect that I do not want for my menu but I would still like to use the global "a" style without affecting the menu.

I know this may seem confusing but it is the only way I could explain my issue.

Please help.

Post by **Ruth** » Wed Dec 27, 2006 8:45 pm

Hi,

Try putting a single cell table where you have the menu and put the menu in it. The submenus then open right at the bottom menu border.

Code: Select all

<TD align=left>
    <table border=0 cellpadding=0 cellspacing=0>
<tr>
    <td><SCRIPT src="menu_data1.js" type=text/javascript></SCRIPT></td>
</tr>
</table>
    </TD>

As to the flicker issue, it is the font size in the a.hover that is affecting IE. The only fix I know is to either make the font sizes the same in your menu and the a class, try setting an a.hover class for the menu, though I can't figure how you'd do that since there is no corresponding hoverclass to the offclass, onclass in the menu, or eliminate the a.hover class.

Ruth