Horizontal menu width differes Mozilla and IE

[tpg@umich.edu]

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";
}

[Ruth]

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

[tpg@umich.edu]

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!

[Maz]

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

[tpg@umich.edu]

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();

[Maz]

Another suggestion try removing overflow="scroll";

I have to dash off now.

maz

[tpg@umich.edu]

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.

[Ruth]

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

Code: Select all

with(milonic=new menuname("Merlin Menu")){ 
style=gcStyle; 
top=10; 
left=10; 
itemwidth="100%";
alwaysvisible=1; 
position="relative"; 
orientation="horizontal"; 

Ruth

[kevin3442]

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

[tpg@umich.edu]

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.