Strange problem with relative menu on IE Mac

[somorgujo]

Hi everyone I hope you can help me with this.

I'm moving from a "fixed" layout to a centered one. To achieve that I had to embed the milonic menu in my tableless layout on the div where the menu is supoused to appear.
NOw everything went fine until (NO surprise!) I tested on Mac IE 5.22, actually it looks almost fine but when you go over the menus it will "erase" the content over the margins of the underlying divs.
To explain the effect better the menu dissapears but only where there's a underlying div with a margin set and only where the margin is.
I was looking on the forum but I couldn't find anything about this "effect".
I made a dump of the code to create a static page so you can have a look on the problem:

http://www.comfactory.com/beta/syngenta/fungicides.htm

Here a screenshot from the mac:
Notice the first item on the drop down menu how the words are overlapped by a white rectangle that represents the underlying margin set to the content.



Here another, here is easier to note it because I have a vertical margin and it cuts it vertically:




Thanks in advance

[Ruth]

Hi,

I downloaded the page and I don't see that there is a change to a centered layout. However, I can tell you the problem is the result of having the menu in a div. Most browsers will not have a problem but some will, that's because of how browsers treat divs. I'm sure you've seen things like IE Hack, Mozilla Fix etc when divs are created for layouts. The browsers don't all treat divs the same way, it has to do with how they treat positioning, relative, fixed, absolute, etc.

There is a fix. At the top of the page, use a table for your logo and the menu. Then use the div layout for everything else. That should fix the problem in the Mac and any other browsers that might do something strange with divs.

Code: Select all

<table width="767" cellpadding="0" cellspacing="0" border="0">
<tr>
       <td style="PADDING-RIGHT: 28px; PADDING-LEFT: 0px; PADDING-BOTTOM: 19px; PADDING-TOP: 16px">
<A 
id=linkHome href="http://websites.milonic.com/localhost/en/index.aspx"><IMG height=41 alt="" 
src="syngenta_logo.jpg" width=134></A>
</td>
<td style="PADDING-RIGHT: 0px;PADDING-LEFT: 0px;PADDING-BOTTOM: 0px;MARGIN: 0px;PADDING-TOP: 0px;
HEIGHT: 76px;">
<SCRIPT language=JavaScript type=text/javascript>
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
style=AllImagesStyle;
orientation="horizontal";
position="relative";
aI("image=top_nav_1.jpg;overimage=top_nav_1_over.jpg;showmenu=about_syngenta;...;");
aI("image=top_nav_inter_1.jpg;");
aI("image=top_nav_2.jpg;overimage=top_nav_2_over.jpg;showmenu=products_services;...;");
aI("image=top_nav_inter_2.jpg;");
aI("image=top_nav_3.jpg;overimage=top_nav_3_over.jpg;showmenu=social_responsibility;...;");
aI("image=top_nav_inter_3.jpg;");
aI("image=top_nav_4.jpg;overimage=top_nav_4_over.jpg;showmenu=investor;...;");
aI("image=top_nav_inter_4.jpg;");
aI("image=top_nav_5.jpg;overimage=top_nav_5_over.jpg;showmenu=media;...;");
aI("image=top_nav_inter_5.jpg;");
aI("image=top_nav_6.jpg;overimage=top_nav_6_over.jpg;...;");
}
drawMenus();
</SCRIPT> </td></tr></table>
<DIV id=mainWrap style="MARGIN: 0px auto; WIDTH: 767px; TEXT-ALIGN: left">

and so on, using your actual full aI info. You would remove the divs related to the logo and menu, of course.

Hope this helps.

Ruth