Horizontal menu width differes Mozilla and IE

Poster: tpg __at__ umich.edu
Dated: Friday April 9 2004 - 14:58:17 BST

See http://csg.sph.umich.edu/pn/index.php?f ... index.html

The blue horizontal menu shows a nicely bounded box on every browser I've tried except IE, where it is pushed to 100% wide for the containing table. I've tried setting various properties for mm_style, but have not guessed correctly. Can you give me a point to what I need to mess with to get IE to behave the same as the rest? TIA

with(gcStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#C5E1E7";
offcolor="#0000FF";
bordercolor="#000000";
borderstyle="solid";
borderwidth=2;
separatorcolor="#000000";
separatorsize="2";
menuheight=66;
padding=5;
fontsize="13";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#FFFFFF";
subimage="/js/arrow.gif";
subimagepadding="2";
}

Poster: Ruth
Dated: Friday April 9 2004 - 17:06:14 BST

I am looking at the menu in Firebird and IE 5.5 right now and there is no difference. They both sit with about 7 pixels to the right and left of them before the border of the full box. Which ie is giving you this problem?

Ruth

Re: Horizontal menu width differes Mozilla and IE

Poster: tpg __at__ umich.edu
Dated: Friday April 9 2004 - 17:37:32 BST

If I view this URL with IE 6.0 (XP) the blue navigation menus full the text window (with a little margin). If the menus don't have very many items, then the first and last are several times wider than the others (which are just big enough for the text being shown).

Viewing the same with NS 7.1, Konquer (latest KDE version) and Mozilla 1.4.1 shows the menu box being just large enough for the text and then on large windows, quite some distance from the edge of the containing table (white background).

This is hard to describe. If this is still confusing, I'll take a screen snapshot so you can see what I mean. Thanks for the quick response!

Poster: Maz
Dated: Friday April 9 2004 - 18:09:59 BST

I had a quick look, see if any of these apply.

Where you have digit values only, I think it was on ?padding remove the quotes.

Is the text the same size in all? If you are using a style sheet where the font size is changing add the px to font in quotes. "12px" Doesn't usually need it but occassionally I've had problems with inheritance(sp).

maz

Poster: tpg __at__ umich.edu
Dated: Friday April 9 2004 - 18:34:10 BST

Mmmm - nice thought about the quotes, but no cigar. The font sizes stay the same, nothing tricky going on. Just to be completely clear, here's the entire JS for the menu in question:

with(gcStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#C5E1E7";
offcolor="#0000FF";
bordercolor="#000000";
borderstyle="solid";
borderwidth=2;
separatorcolor="#000000";
separatorsize=2;
menuheight=66;
padding=5;
fontsize=13;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#FFFFFF";
subimage="/js/arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("Merlin Menu")){
style=gcStyle;
top=10;
left=10;
alwaysvisible=1;
overflow="scroll";
position="relative";
orientation="horizontal";
aI("text=Gonçalo;url=/pn/index.php?furl=/abecasis/index.html");
aI("text=Merlin;url=/pn/index.php?furl=/abecasis/Merlin/index.html");
aI("text=Tutorial;showmenu=Tutorial");
aI("text=Download;url=/pn/index.php?furl=/abecasis/Merlin/download/index.html");
aI("text=FAQ;url=/pn/index.php?furl=/abecasis/Merlin/FAQ.html");
aI("text=Reference;showmenu=Reference");
aI("text=Register;url=javascript:regpopup('MERLIN');");
}

with(milonic=new menuname("Tutorial")){
style=gcStyle;
overflow="scroll";
aI("text=Introduction;url=/pn/index.php?furl=/abecasis/Merlin/tour/index.html");
aI("text=Input File Format;url=/pn/index.php?furl=/abecasis/Merlin/tour/input_files.html");
aI("text=Linkage;url=/pn/index.php?furl=/abecasis/Merlin/tour/linkage.html");
aI("text=IBD and Kinship;url=/pn/index.php?furl=/abecasis/Merlin/tour/ibd.html");
aI("text=Haplotyping;url=/pn/index.php?furl=/abecasis/Merlin/tour/haplotyping.html");
aI("text=Error Detection;url=/pn/index.php?furl=/abecasis/Merlin/tour/error.html");
aI("text=Simulation;url=/pn/index.php?furl=/abecasis/Merlin/tour/simulation.html");
}

with(milonic=new menuname("Reference")){
style=gcStyle;
overflow="scroll";
aI("text=Quick Reference;url=/pn/index.php?furl=/abecasis/Merlin/reference.html");
aI("text=Advanced Topics;url=/pn/index.php?furl=/abecasis/Merlin/reference/");
}

drawMenus();

Poster: Maz
Dated: Friday April 9 2004 - 18:55:02 BST

Another suggestion try removing overflow="scroll";

I have to dash off now.

maz

Poster: tpg __at__ umich.edu
Dated: Friday April 9 2004 - 19:22:33 BST

Mmmm - I've already had problems with scroll. Unfortunately, removing it does not solve the problem. I am going to purge scroll all my menus. It can only get me into trouble. Thanks for the idea.

Poster: Ruth
Dated: Friday April 9 2004 - 23:14:44 BST

Ok, I resized my window and see what you mean. Try putting itemwidth="100%";

Ruth

Poster: kevin3442
Dated: Saturday April 10 2004 - 3:24:27 BST

Tpg,

Hmmmm... I tried messing with your code to no avail. Then, on a lark, I checked the table-bound menu sample on the main site. Guess what?... the sample does the same exact thing... full width of the table cell in IE, but not in other browsers. IE is behaving as if there's a menuwidth="100%" property set in the main menu, when there's not. Taking it a step further, I ran your code with successively older version of the menu. The odd width behavior persisted back to v5.07. I don't have v5.06, so I had to skip that. When I got to v5.05, the odd width behavior stopped. So, I wonder if there's a bug that was introduced in v5.06 or v5.07 that is causing this unexpected behavior? I don't think there's much you can do right now to make the menu render in IE the way it does in the other browsers, unless you remove it from the table and place it where you want with some other means (the menu has built-in functions that would allow you to place it just like you are now using tables).

Kevin

Poster: tpg __at__ umich.edu
Dated: Monday April 12 2004 - 13:27:18 BST

Wow! Thanks for all the checking! I can live with a bug in IE. Someday it'll fix itself, I suppose. I'll think on maybe generating different code based on the browser... maybe. I hate that sort of thing. Anyway, I appreciate the investigation. If you get an inspiration, drop me an Email or post here and I'll hear about it. Thanks again.