Strange problem with relative menu on IE Mac

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
somorgujo
Beginner
Beginner
Posts: 8
Joined: Thu Sep 26, 2002 3:42 pm

Strange problem with relative menu on IE Mac

Post by 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.

Image

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

Image


Thanks in advance
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by 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
Post Reply