IE problem with top border and links

Poster: gfbhwo
Dated: Monday September 29 2008 - 22:45:32 BST

I have a menu set up that works quite nicely in Firefox, but has two issues under IE6.

The first is minor, I placed a black border all around the drop-down menus that pop-up. In IE6, the top of the border is not there.

The following was added to the CSS for the pages:

// For milonic, to get the border to work in a relative div

//.itemtop{
// border-top:1px solid #000000;border-right:1px solid #000000;border-bottom:none;border-left:1px solid #000000;text-decoration:none;
//}
.itemtop{
border-top:1px solid;border-right:1px solid #000000;border-bottom:none;border-left:1px solid #000000;text-decoration:none;
}
.itembot{
border-top:none;border-right:1px solid #000000;border-bottom:1px solid #000000;border-left:1px solid #000000;text-decoration:none;
}
.itemmid{
border-top:none;border-right:1px solid #000000;border-bottom:none;border-left:1px solid #000000;text-decoration:none;
}


The second is a bigger problem. Several of the main menu items do not have submenu drop-downs but are links. They do not work, in fact do not seem to be recognised as links by IE6.

These can all be seen at: cedarriverclinics.org


The menu_data.js is below.

=======================================================================

_menuCloseDelay=500 // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150 // The time delay before menus open on mouse over
_subOffsetTop=5 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset
buildAfterLoad=true



with(AllImagesStyle=new mm_style()){
bordercolor="#000000";
borderstyle="solid";
padding=3;
fontstyle="normal";
fontweight="normal";
}


with(menuStyle=new mm_style()){
onbgcolor="#000099";
oncolor="#ffffff";
offbgcolor="#C0C0E6";
offcolor="#515151";
// bordercolor="#000000";
// borderstyle="solid";
// borderwidth=1;
separatorcolor="#000000";
separatorsize="1";
padding=1;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="2";
//overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
// outfilter="randomdissolve(duration=0.3)";
}


with(milonic=new menuname("Main Menu")){
style=AllImagesStyle;
position="relative";
//top=10;
//left=10;
alwaysvisible=1;
orientation="vertical";
itemwidth=144;

aI("showmenu=abortion;url=pages/healthabortion.html;status=Back To Home Page;image=nav_images/abortion.gif;overimage=nav_images/abortionmo.gif;");
//aI("showmenu=abortion;status=Back To Home Page;offclass=ab-off;onclass=ab-on;");
aI("showmenu=bc and wwc;url=pages/healthtakecharge.html;status=Back To Home Page;image=nav_images/bcwellwoman.gif;overimage=nav_images/bcwellwomanmo.gif;");
aI("showmenu=clinic locations;url=pages/clinic.html;status=Back To Home Page;image=nav_images/cliniclocations.gif;overimage=nav_images/cliniclocationsmo.gif;");
aI("url=pages/resources.html;image=nav_images/resources.gif;overimage=nav_images/resourcesmo.gif;");
aI("url=http://www.birth-control-comparison.info/;target=_new;image=nav_images/bcchart.gif;overimage=nav_images/bcchartmo.gif;");
aI("url=http://www.fwhc.org/espanol;target=_new;image=nav_images/espanol.gif;overimage=nav_images/espanolmo.gif;");
aI("url=pages/aboutus.html;image=nav_images/about.gif;overimage=nav_images/aboutmo.gif;");
aI("showmenu=job openings;url=pages/jobs.html;status=Back To Home Page;image=nav_images/jobs.gif;overimage=nav_images/jobsmo.gif;");
aI("url=pages/aboutus.html;image=nav_images/donate.gif;overimage=nav_images/donatemo.gif;");
aI("url=pages/contact.html;image=nav_images/contact.gif;overimage=nav_images/contactmo.gif;");
}

with(milonic=new menuname("abortion")){
style=menuStyle;
overflow="scroll";
left=200;

aI("url=pages/healthabortion.html;text=About Abortion Services;onclass=itemtop;offclass=itemtop;");
aI("url=pages/healthabortionaboutfirsttri.html;text=First Trimester;onclass=itemmid;offclass=itemmid;");
aI("url=pages/healthabortionaboutsecondtri.html;text=Second Trimester;onclass=itemmid;offclass=itemmid;");
aI("url=pages/healthabortionaboutpill.html;text=Abortion Pill;onclass=itemmid;offclass=itemmid;");
aI("url=http://www.fwhc.org/abortion/abpill-compare-surgical.htm;target=_new;text=Compare Abortion Pill to Procedure;onclass=itemmid;offclass=itemmid;");
aI("url=pages/healthabortionanesth.html;text=Anesthesia Options;onclass=itemmid;offclass=itemmid;");
aI("showmenu=preparing;text=Preparing for an Abortion;onclass=itemmid;offclass=itemmid;");
aI("url=pages/healthabortionaboutdayof.html;text=The Day of your Appointment;onclass=itemmid;offclass=itemmid;");
aI("showmenu=ifyouhad;text=If you had an Abortion;onclass=itembot;offclass=itemmid;");
aI("url=pages/healthabortionstories.html;text=Women's Personal Stories;onclass=itemmid;offclass=itemmid;");
aI("url=pages/healthabortionfaq.html;text=FAQ about Abortion;onclass=itemmid;offclass=itembot;");
}

with(milonic=new menuname("preparing")){
style=menuStyle;
overflow="scroll";
left=450;

aI("url=pages/appt.html;text=Preparing for an Abortion Appointment;onclass=itemtop;offclass=itemtop;");
aI("url=pages/apptpregtest.html;text=First, get a Pregnancy Test;onclass=itemmid;offclass=itemmid;");
aI("url=pages/apptoptions.html;text=Making a Decision: Options Counseling;onclass=itemmid;offclass=itemmid;");
aI("url=pages/apptpre.html;text=Pre-Abortion Information;onclass=itembot;offclass=itembot;");
}

with(milonic=new menuname("ifyouhad")){
style=menuStyle;
overflow="scroll";
left=350;

aI("url=pages/abortion.html;text=If you had an Abortion;onclass=itemtop;offclass=itemtop;");
aI("url=pages/abortionvoices.html;text=Listen to Our Voices;onclass=itemmid;offclass=itemmid;");
aI("url=pages/abortionaction.html;text=Ways to Take Action;onclass=itemmid;offclass=itemmid;");
aI("url=pages/abortionwoc.html;text=For Women of Color;onclass=itemmid;offclass=itemmid;");
aI("url=pages/abortionresources.html;text=Further Resources;onclass=itembot;offclass=itembot;");
}
with(milonic=new menuname("bc and wwc")){
style=menuStyle;
overflow="scroll";
left=200;

aI("url=pages/healthtakecharge.html;text=Birth Control, \"Take Charge\";onclass=itemtop;offclass=itemtop;");
aI("showmenu=wwgc;text=Well Woman Gynecological Care;onclass=itembot;offclass=itembot;");
}

with(milonic=new menuname("wwgc")){
style=menuStyle;
overflow="scroll";
left=405;

aI("url=pages/healthwellwoman.html;text=Well Woman Gynecological Care;onclass=itemtop;offclass=itemtop;");
aI("url=pages/healthwellwoman1.html;text=What happens during a Well Woman Exam?;onclass=itemmid;offclass=itemmid;");
aI("url=pages/healthwellwoman2.html;text=When should I have a Well Woman Exam?;onclass=itemmid;offclass=itemmid;");
aI("url=pages/healthwellwoman3.html;text=Learning About a Woman's Body;onclass=itembot;offclass=itembot;");
}

with(milonic=new menuname("clinic locations")){
style=menuStyle;
overflow="scroll";
left=190;

aI("url=pages/clinic.html;text=General Information;onclass=itemtop;offclass=itemtop;");
aI("url=pages/clinictacoma.html;text=Tacoma;onclass=itemmid;offclass=itemmid;");
aI("url=pages/clinicrenton.html;text=Renton;onclass=itemmid;offclass=itemmid;");
aI("url=pages/clinicyakima.html;text=Yakima;onclass=itembot;offclass=itembot;");
}

with(milonic=new menuname("job openings")){
style=menuStyle;
overflow="scroll";
left=170;

aI("url=pages/jobstacoma.html;text=In Tacoma;onclass=itemtop;offclass=itemtop;");
aI("url=pages/jobsrenton.html;text=In Renton;onclass=itemmid;offclass=itemmid;");
aI("url=pages/jobsyakima.html;text=In Yakima;onclass=itemmid;offclass=itemmid;");
aI("url=pages/jobsseattle.html;text=In Seattle;onclass=itembot;offclass=itembot;");
}

drawMenus();

Re: IE problem with top border and links

Poster: Ruth
Dated: Tuesday September 30 2008 - 3:53:34 BST

Hi,

Can you provide us with a link to the page? We really need to see that. Also, what version of the menu, you need to be up to date since we have no way to 'fix' an old set of program files, that is what is done in the updates which may have fixed your issue.

Ruth

Re: IE problem with top border and links

Poster: gfbhwo
Dated: Tuesday September 30 2008 - 5:28:13 BST

I did list it in the original posting, but I should have made it stand out, sorry.

The site where the menus are in use is: http://www.cedarriverclinics.org

The navigation menu is on the left side. Those links that have drop-down submenus work fine, those that re direct links do not. This is only a problem with IE (both 6 and 7). Unfortunately, that's still what most people use.

The version number is 5.796. I have included the header from th code I downloaded below.

Thanks,

Gareth

/*

Milonic DHTML Menu - JavaScript Website Navigation System.
Version 5.796 - Built: Thursday June 19 2008 - 16:12
Copyright 2008 (c) Milonic Solutions Limited. All Rights Reserved.
This is a commercial software product, please visit http://www.milonic.com/ for more information.
See http://www.milonic.com/license.php for Commercial License Agreement
All Copyright statements must always remain in place in all files at all times

******* PLEASE NOTE: THIS IS NOT FREE SOFTWARE, IT MUST BE LICENSED FOR ALL USE *******

License Details:
Number: 208104
URL: CedarRiverClinics.org
Type: Professional
Dated: Sunday July 6 2008

*/

Re: IE problem with top border and links

Poster: gfbhwo
Dated: Tuesday September 30 2008 - 6:15:26 BST

I also just downloaded 5.802 and tried it - no change. I have not updated the site on the web with the new code however.

Re: IE problem with top border and links

Poster: gfbhwo
Dated: Tuesday September 30 2008 - 6:28:18 BST

A clarification on the problem at http://www.cedarriverclinics.org:

All the menu buttons on the left should take you to another page when clicked. Some of them also pop-up drop-down menus when moused over.

All this works correctly in Firefox.

Under IE, navigation via the dropdown menus works fine, but none of the buttons take you to the direct links. In other words, the "url=" keyword appears not to work.

The menu is in a separate div from the rest of the page content.

I hope this helps. There does not appear to be anything I can do to change the behavior.

Re: IE problem with top border and links

Poster: Ruth
Dated: Tuesday September 30 2008 - 17:07:25 BST

Hi,

The problem is due to the relative positioning. Usually it is not a problem but in your layout you are putting the menu relatively in a div that is nested in divs nested in divs all of which are also positioned relatively. Yes, it works in some browsers but that is the problem with relative positioning the browsers don't all seem to do treat divs and div positioning the same way.

I'm not real good at css but I did find a solution outside that. I changed my resolution so I could see how your layout works. It seems that it is always at that left position and top position. Given that you can actually just place the menu based on top and left settings instead of relative. The only issue I found was in FF with the footer. It seemed to go up a few pixels. So, if you want to try that and see if it will serve, I change the main menu to



Then you would just call all the files first thing after the body tag instead of in the div.

You could also try not putting in any top and left position, not putting in position="relative"; and place the call in the div, HOWEVER, that isn't the way to really do it and there is NO guarantee that it will work in all browsers. I did try it and it seemed to work in IE6, FF1.5, FF2.0.0.17, FF3, Safari 3 for pc, Opera 9.5, NN7.2, NN9. I have no way to test it on a Mac.

As noted this is not supported, and the one I posted with the top and left set is the correct way to do it since it won't work in IE being relatively positioned insided nested divs also relatively positioned.

Hope this helps.

Ruth

Re: IE problem with top border and links

Poster: gfbhwo
Dated: Tuesday September 30 2008 - 22:00:19 BST

Ruth,

Thanks for the assistance. I tried the approach using the top/left positioning and it seems to work. I will be doing some more testing before deploying it.

The IE browser still does not display the top border of the drop down menus even after upgrading to the latest milonic version. What's worse is that the upgrade to 5.802 has introduced a new anomaly with IE. For those drop-downs that have a secondary drop-down, a small X-in-a-box icon appears at the very right of the menu entry that leads to the secondary drop down. It is much like the icon one sees when an image is not found in a web page, but much smaller. This is with the upgrade to 5.802 and your top/left solution.

Here is a screenshot of the both the drop-down problems:



I am most grateful for your help so far, especially with how fast it was.

Thanks,

Gareth

Re: IE problem with top border and links

Poster: Ruth
Dated: Wednesday October 1 2008 - 5:04:46 BST

The problem is in the css. You have .itemtop{border-top:1px solid; which has no color in it so no border appears in IE.

Ruth

Re: IE problem with top border and links

Poster: gfbhwo
Dated: Wednesday October 1 2008 - 5:58:33 BST

You are most efficient Ruth. Thanks - I should have seen that error in the CSS. I guess Firefox must be forgiving about it.

That just leaves the one last problem with the mysterious "X" image in the screenshot that was introduced at 5.802. I discovered this also affects Safari on the Mac, only the icon is a small question mark instead of an "X".

It is not present if I use all your suggested fixes in the version 5.796. Obviously I would prefer to use the latest version, but I can't until I find this problem. Any ideas?

Re: IE problem with top border and links

Poster: Ruth
Dated: Wednesday October 1 2008 - 15:27:48 BST

Hi,

It's your subimage in your submenu style. The arrow is not where the path says it is.

Ruth

Re: IE problem with top border and links

Poster: gfbhwo
Dated: Thursday October 2 2008 - 0:53:10 BST

That is all my issues solved in slightly over 1 day. I am most impressed and grateful.

Clearly I need to eyeball my code better.

Thanks Ruth for your great support.

Gareth

Re: IE problem with top border and links

Poster: Ruth
Dated: Thursday October 2 2008 - 5:21:37 BST

Welcome. I love this menu. I found a few years ago and discovered I could do a lot of artistic things with it. Good or just kind of basic, I like to create stuff and this menu makes it so easy. I like helping people get it working right or getting the design they like.

Ruth