Absolute Menu Width/Item width problem

tepidarium · Post by **tepidarium** » Thu Sep 02, 2004 9:27 pm

Hi,

I am having a problem setting the absolute menu width and item width of my menu.

In Internet Explorer 6 the menu is 750px and everything is fine.
In Netscape 6/7 the menu is 2 pixels larger. No matter what I do, the menu is always two pixels larger in Netscape 6/7. I am not sure what is wrong.

I am using the most current version of the menu on my test page - the rest of my site is using an older version that did not have this problem.

Any help would be greatly appreciated. Thanks!

url: http://www.citytech.cuny.edu/menutest/menu.html

tepidarium · Post by **tepidarium** » Thu Sep 02, 2004 9:36 pm

Here are some relevant code snippets (do I have any conflicts that might be producing the problem?

Code: Select all

with(milonic=new menuname("Main Menu")){ 
style=mainStyle; 
alwaysvisible=1; 
orientation="horizontal"; 
position="relative";
menuwidth="750";
aI("text=About Us;url=/aboutus/index.shtml;status=About Us;showmenu=About;itemwidth=82;itemheight=18;align=center;"); 
aI("text=Academics;url=/academics/index.shtml;status=Academics;showmenu=Academics;itemwidth=82;itemheight=18;align=center;"); 
aI("text=Admissions;url=/admissions/index.shtml;status=Admissions;showmenu=Admissions;itemwidth=82;itemheight=18;align=center;"); 
aI("text=Alumni;url=/alumni/index.shtml;status=Alumni;itemwidth=82;itemheight=18;align=center;pagematch=/alumni/;"); 
aI("text=Faculty/Staff;url=/faculty/index.shtml;status=Faculty/Staff;showmenu=Faculty;itemheight=18;itemwidth=83;align=center;"); 
aI("text=Students;url=/students/index.shtml;status=Students;showmenu=Students;itemwidth=82;itemheight=18;align=center;"); 
aI("text=Search;url=/search/index.html;status=Search;showmenu=Search;itemwidth=82;itemheight=18;align=center;pagematch=/search/;"); 
aI("text=Site Map;url=/sitemap/index.shtml;status=Site Map;itemwidth=82;itemheight=18;align=center;"); 
aI("text=Home;url=/;status=Home;itemheight=18;itemwidth=83;align=center;pagematch=/index.shtml;"); 
} 
drawMenus();

here's the style:

Code: Select all

with(mainStyle=new mm_style()){
onbgcolor="#FFFF99";
oncolor="#000000";
offbgcolor="#FFCC66";
offcolor="#000000";
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
separatorcolor="#999999";
separatorsize="1";
padding=0;
fontsize="12px";
fontstyle="normal";
fontfamily="Arial, Verdana, Tahoma";
pagecolor="black";
pagebgcolor="#FFFF99";
headercolor="#000000";
headerbgcolor="#ffffff";
}

Post by **Ruth** » Fri Sep 03, 2004 5:59 pm

It has something to do with how Netscape and IE render borders in css. I remember reading about that though I can't remember where I found the information, on some site that was giving info on problems in IE, I believe and saying that IE didn't follow css requirements and put the border outside of the actual item, but included it in the height/width. I think it was in reference to box or something. Sorry I can't be more specific but it was a passing reference in my search for something else. I checked your menu with a ruler and if you do that you'll see that the menu itemheight is also 2px higher in Netscape, but that doesn't show to the naked eye. It does the same thing in Firefox. Netscape puts the border outside of the height/width, IE includes the border in the height/width. The only two ideas I had were:

1. some javascript browser test and fucntion to say if IE menu is 750 else it's 748, but then I'm not sure what happens in other browsers like Opera, Safari, etc.

2. Make the color of that cell in which the menu appears the same color as the background of the menu, then remove the border from the main menu and turn on the border for that menu cell and have it be the color of the border you now have listed in the menu, utilizing the table cell border as the menu border.

Ruth

tepidarium · Post by **tepidarium** » Sun Sep 05, 2004 4:36 pm

Hi Ruth,

Thank you for your thoughtful response. I really appreciate it.

I am going to try to implement suggestion #2 - although I have to reread what you wrote as I am a bit confused

A question -I understand that Netscape & i.e. may have a differnt way of rendering css borders - but -

Until Milonic menu updates in late june - the menu width rendered fine in both browsers - then -over the summer somethign changed in Milonic menu... does anyone have an idea of what changed to make this property slightly off now?

Post by **Ruth** » Sun Sep 05, 2004 10:49 pm

I don't know which version you were using, but I would guess that what happened was something got fixed and when that was fixed the fix also brought some css functioning into line with css requirements.

And I have an easier thing to try, which seems to work. Since the main menu is in a table, try putting in menuwidth="100%"; instead of specifying a width. I just tested in IE5.5, Netscape7.1, Firebird .07 and they all seem to render the same no overlap on the border.

Ruth

tepidarium · Post by **tepidarium** » Mon Sep 06, 2004 6:35 am

Hi Ruth,

Thanks again for your reply. I am excited to see whether your latest suggestion will work. I'll tell you on Tuesday!

thanks again

tepidarium · Post by **tepidarium** » Tue Sep 07, 2004 2:46 pm

Ruth wrote: And I have an easier thing to try, which seems to work. Since the main menu is in a table, try putting in menuwidth="100%"; instead of specifying a width. I just tested in IE5.5, Netscape7.1, Firebird .07 and they all seem to render the same no overlap on the border.

Ruth

Hi Ruth,

I tried this fix...it works in most of the browsers except Netscape 6. In Netscape 6 -the menu inexplicably is 2 or 3 pixels wider on the right side of the menu.

Post by **Ruth** » Tue Sep 07, 2004 3:27 pm

Sorry, Tep. I think Netscape 6 is going to be a problem. It had a lot of problems which were fixed in Netscape 7. So, I don't know if there's a solution for that browser.

Ruth