Unwanted space between menu images

[bkayne]

I'm using images w/o text for my main nav menu, but can't seem to adjust the menu_data.js settings to accomplish my aim. I want my images to butt up against one another. Right now there is a strip of the background color between them. On IE, there's a wider strip of color and a box with an X in iit. The page is here:

http://www.peaceprojectassisi.org/theze ... menus.html

I appreciate any help. Thanks,

Bob

My settings are:

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

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

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=139;
margin=0;
aI("image=images/tab1.jpg;overimage=images/tab1a.jpg;showmenu=ZMPC");
aI("image=images/tab2.jpg;overimage=images/tab2.jpg;showmenu=AVCP;");
aI("image=images/tab3.jpg;overimage=images/tab3.jpg;showmenu=Links;");
aI("image=images/tab4.jpg;overimage=images/tab4.jpg;showmenu=Links;");

[vikenk]

Bob,

I want my images to butt up against one another. Right now there is a strip of the background color between them. On IE, there's a wider strip of color and a box with an X in it

Well, the red X is there because IE can't find the associated image. I suspect that the missing image is "arrow.gif", the submenu indicator image. If you do not want a submenu indicator image then remove the following commands:

Code: Select all

subimage="arrow.gif";
subimagepadding=2;

The rest of your code seems OK. If you want the images to butt-up against eachother, then I would remove the separator related values (color, size, etc.), or at the very least, set separator size to zero (like you already have) and do not specify colors for the separator.

I think you can do this either by "commenting them out" with the double slash ( // ) or just leaving no values in the quotation marks.

Hope this Helps.

Viken K.
http://home.comcast/net/~vikenk

[John]

Removing the subimage and padding as Viken suggested will get rid of those vertical green bars. However, a couple of the images still have a slight gap, which I believe is from the way they were constructed.

You also might consider changing your font size from 100% to a px value (e.g., "12px"). This is much more cross-browser friendly than the %.

[bkayne]

Thanks! Worked like a charm.

Bob

[John]

Glad to hear it.