Can't get rid of border around images

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:36

Can't get rid of border around images

Poster: kevdog98
Dated: Wednesday April 18 2007 - 17:55:55 BST

Hi,

I want to be able to get ride of the blue border around the images on my main nav on this page http://www.upc.org/testmenu/urban.aspx?id=382 but can not figure out how.

I have tried using borderwidth=0 and imageborderwidth=0 but it does not work. What am I doing wrong please help. My code is below:

Code:

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


with(menuStyle=new mm_style()){
fontfamily="Trebuchet MS";
fontsize="11";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#3399CC";
offcolor="#FFFFFF";
onbgcolor="#297AB8";
oncolor="#FFFFFF";
padding=4;
separatorcolor="#FFFFFF";
separatorsize=0;
subimage="transparent.gif";
itemheight=30;
itemwidth=114;
}

with(calendarmenu=new mm_style()){

fontfamily="Trebuchet MS";
fontsize="11";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#3399CC";
offcolor="#FFFFFF";
onbgcolor="#297AB8";
oncolor="#FFFFFF";
padding=4;
separatorcolor="#999999";
separatorsize=0;
subimage="transparent.gif";
itemheight=30;
itemwidth=114;
}

with(worshipmenu=new mm_style()){
bordercolor="#296488";
borderstyle="solid";
borderwidth=0;
fontfamily="Trebuchet MS";
fontsize="11";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#98B573";
offcolor="#FFFFFF";
onbgcolor="#7A9170";
oncolor="#FFFFFF";
padding=4;
separatorcolor="#999999";
separatorsize=0;
subimage="transparent.gif";
itemheight=30;
itemwidth=114;
}

with(minmenu=new mm_style()){
fontfamily="Trebuchet MS";
fontsize="11";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#429491";
offcolor="#FFFFFF";
onbgcolor="#357688";
oncolor="#FFFFFF";
padding=4;
separatorcolor="#999999";
separatorsize=0;
subimage="transparent.gif";
itemheight=30;
itemwidth=114;
}

with(missionmenu=new mm_style()){
fontfamily="Trebuchet MS";
fontsize="11";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#CC6666";
offcolor="#FFFFFF";
onbgcolor="#A45266";
oncolor="#FFFFFF";
padding=4;
separatorcolor="#999999";
separatorsize=0;
subimage="transparent.gif";
itemheight=30;
itemwidth=114;
}

with(aboutmenu=new mm_style()){
fontfamily="Trebuchet MS";
fontsize="11";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#EC8B67";
offcolor="#FFFFFF";
onbgcolor="#BD6F67";
oncolor="#FFFFFF";
padding=4;
separatorcolor="#999999";
separatorsize=0;
subimage="transparent.gif";
itemheight=30;
itemwidth=114;
}

with(stewardshipmenu=new mm_style()){
fontfamily="Trebuchet MS";
fontsize="11";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#3366CC";
offcolor="#FFFFFF";
onbgcolor="#2547AD";
oncolor="#FFFFFF";
padding=4;
separatorcolor="#999999";
separatorsize=0;
subimage="transparent.gif";
itemheight=30;
itemwidth=114;
}


with(newsmenu=new mm_style()){
fontfamily="Trebuchet MS";
fontsize="11";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#7A7AA3";
offcolor="#FFFFFF";
onbgcolor="#66669A";
oncolor="#FFFFFF";
padding=4;
separatorcolor="#999999";
separatorsize=0;
subimage="transparent.gif";
itemheight=30;
itemwidth=114;
}

with(milonic=new menuname("null")){
itemheight=30;
itemwidth=114;
overflow="scroll";
}


with(milonic=new menuname("calendar")){
itemheight=30;
itemwidth=114;
overflow="scroll";
style=calendarmenu;
aI("text=Calendar;url=calendar_events.aspx;")
aI("text=Class Schedule;url=/calendar.aspx?id=80;")
aI("text=Schedule an Event;url=/calendar.aspx?id=198;")
}

with(milonic=new menuname("worship")){
itemheight=30;
itemwidth=114;
style=worshipmenu;
aI("text=Worship;url=/worship.aspx?id=36;");
aI("text=Worship Services;url=/worship.aspx?id=72;");
aI("text=Current Sermon Series;url=/worship.aspx?id=66;");
aI("text=Current Study Guide (PDF);url=/uploadedFiles/UPC_Website/CurrentStudyGuide.pdf;target=_blank");
aI("text=Online Audio;url=/worship.aspx?id=452");
aI("text=Podcasts;url=/worship.aspx?id=200;");
}

with(milonic=new menuname("ministries")){
itemheight=30;
itemwidth=114;
style=minmenu;
aI("text=Ministries;url=/ministries.aspx?id=38;");
aI("text=Adults;url=/adults.aspx?id=316;");
aI("text=Young Adults;url=/youngadults.aspx?id=362;");
aI("text=University Students;url=university/;");
aI("text=Jr. & Sr. High;url=/youth.aspx?id=410;");
aI("text=Children & Families;url=/cfm_home.aspx?id=364;");
aI("text=Music;url=/music.aspx?id=376;");
}

with(milonic=new menuname("mission")){
itemheight=30;
itemwidth=114;
style=missionmenu;
aI("text=Missions;url=/missions.aspx?id=40;");
aI("text=What We Believe;url=/missions.aspx?id=380;");
aI("text=Urban Missions;url=/urban.aspx?id=382;");
aI("text=Global Missions;url=/global.aspx?id=390;");
aI("text=Youth Missions;url=/missions.aspx?id=410;");
aI("text=University Missions;url=university/missions.aspx?;");
}

with(milonic=new menuname("about")){
itemheight=30;
itemwidth=114;
style=aboutmenu;
aI("text=About UPC;url=/aboutupc.aspx?id=42;");
aI("text=Leadership;url=/aboutupc.aspx?id=56;");
aI("text=Membership;url=/aboutupc.aspx?id=96;");
aI("text=Baptism;url=/aboutupc.aspx?id=160;");
aI("text=Employment;url=/employment.aspx?id=122;");
aI("text=Church History;url=/aboutupc.aspx?id=130;");
}

with(milonic=new menuname("stewardship")){
style=stewardshipmenu;
aI("text=Stewardship;url=stewardship.aspx?id=44;");
}

with(milonic=new menuname("news")){
itemheight=30;
itemwidth=114;
style=newsmenu;
aI("text=News/Resources;url=/newsresources.aspx?id=46;");
aI("text=UPC Times: Current;url=/newsresources.aspx?id=406;");
aI("text=UPC Times: Archive;url=/newsresources.aspx?id=202;");
aI("text=Audio Ministries;url=/audio.aspx?id=112;");
aI("text=UPC Library;url=/newsresources.aspx?id=398;");
aI("text=Useful Links;url=/newsresources.aspx?id=192;");
}



drawMenus();

Thanks.

Kevin

Poster: Ruth
Dated: Wednesday April 18 2007 - 19:59:00 BST

Hi,

It's in the menu_data_mis.js file, in the menuStyle. You have a subimage listed, the transparent.gif, that is 1px, and since you don't have text in the item, the subimage is 'next to' the image/overimage and the blue you see is your offbgcolor of the item. Change your onbgcolor to yellow just for testing, and then mouseover the items, you'll see that blue line changed to yellow. I'm not sure why you have that subimage in there since you're not really using one, but if you want the code there try subimage="";

Ruth

Poster: Ruth
Dated: Wednesday April 18 2007 - 20:14:44 BST

I forgot something I wanted to tell you.

In your menu_data_mis.js file, you have the Calendar submenu. I don't know if you've noticed it, but when you mouseover the main item and the submenu drops down, if you don't do a superman quick mouse move to get to the submenu it closes. The other items don't do that. The reason for this in that menu is that the treemenu is below it, so when you mouse down to get to the calendar submenu the mouse hits the collapse menu and forces the calendar sub to close.

OK, after the long explanation, the fix is simple given your setup.

In the actual Calender submenu make it

Code:

with(milonic=new menuname("calendar")){
itemheight=30;
itemwidth=114;
overflow="scroll";
top="offset=-10";
style=calendarmenu;

That offset in there makes the submenu shift up, but doesn't change the look, and it prevents the mouse from ever hitting any of the collapse menu.

Ruth

Poster: kevdog98
Dated: Wednesday April 18 2007 - 21:25:21 BST

Ruth,

Thanks a lot for your help that worked. Now can you tell me why the overbgimage does not appear on this page

Code:

http://www.upc.org/testmenu/missions.aspx?id=40

I have checked that the images are there. I can change all my code to use image and overimage, but it is alot of recoding for me and I would rather not do it unless it is really needed.

Thanks.

Kevin

Poster: Ruth
Dated: Wednesday April 18 2007 - 22:37:24 BST

Hi,

I have no idea what you are trying to do here, why you changed the items to bgimages? I would guess you are going to have to put in text=; and perhaps a non-breaking line space since you don't really want text in there. Because the item doesn't really have anything in it right now this is probably causing the problem when you mouseover. Though it should change the bg to overbg, it's not and most like because there's no text or image in there and when the mouse goes over it, it can't find anything in the item. That may be a bug, and I'll report it, but this is a beta release i.e. pre-release so things can be expected to need 'fixing'.

Can I ask why you changed it from image= and overimage= to bg images? You are aware that in a browser like Netscape, if someone changes their font size to really large, then that menu will also become bigger because the page layout shifts and the bg and overbg images are going to repeat. go to the page in Netscape and then change the browser text size to 300% and watch what happens.

Ruth

Poster: kevdog98
Dated: Wednesday April 18 2007 - 23:02:36 BST

Ruth,

I was using bgimage and overbgimage, and then I switched it to image and overimage when bgimage no longer worked. Maybe I will just recode it to be image and overimage. I a, using 5.773 because Andy fixed the pageimage problem I was having, so hopefully everything else works the same.

Thanks for all your help.

Kevin

Poster: Ruth
Dated: Wednesday April 18 2007 - 23:55:00 BST

Hi,

I think they are not working because the item needs something in it, ie either an image or text coded. The one I originally downloaded was using image and overimage, and in your circumstances I recommend it since anyone who increasing font size a lot in NN or FF is going to have the bgimage repeat. Having it image and overimage keeps the size fixed.

Now if you decided to use bgimage and overbgimage for whatever reason, just put in image="transparent.gif"; in the style for that menu and the menu will assume it has something in it and the bgimage and overbgimage will/should work. Also, if you want to keep sizes or not have the background repeat, you'd need to code the bgimage and overbgimage using css classes where you can set it up as no-repeat.

Ruth

Industrial Strength JavaScript and DHTML Menus

Can't get rid of border around images