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
Absolute Menu Width/Item width problem
-
- Mega User
- Posts: 169
- Joined: Sun Oct 05, 2003 4:21 am
-
- Mega User
- Posts: 169
- Joined: Sun Oct 05, 2003 4:21 am
Here are some relevant code snippets (do I have any conflicts that might be producing the problem?
here's the style:
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();
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";
}
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
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
-
- Mega User
- Posts: 169
- Joined: Sun Oct 05, 2003 4:21 am
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?
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?
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
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
-
- Mega User
- Posts: 169
- Joined: Sun Oct 05, 2003 4:21 am
-
- Mega User
- Posts: 169
- Joined: Sun Oct 05, 2003 4:21 am
Hi Ruth,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
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.