Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:11
Absolute Menu Width/Item width problem
Poster: tepidarium
Dated: Thursday September 2 2004 - 21:27:42 BST
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
Poster: tepidarium
Dated: Thursday September 2 2004 - 21:36:32 BST
Here are some relevant code snippets (do I have any conflicts that might be producing the problem?
Code:
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();
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:
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";
}
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";
}
Poster: Ruth
Dated: Friday September 3 2004 - 17:59:40 BST
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
Poster: tepidarium
Dated: Sunday September 5 2004 - 16:36:45 BST
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?
Poster: Ruth
Dated: Sunday September 5 2004 - 22:49:10 BST
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
Poster: tepidarium
Dated: Monday September 6 2004 - 6:35:28 BST
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
Poster: tepidarium
Dated: Tuesday September 7 2004 - 14:46:29 BST
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
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.