Working out the bugs in my first menu (using CSS)

[galneweinhaw]

First. YAY! Thank you for the menu =D

It is functioning well, just a few annoyances I would like to try and get fixed up if possible!

(I have the latest menu scripts, Apr 1st!)

Here are the issues I am having, in order of annoyance level =)
1. The "firefox finger" on the submenus. There is a finger at the top of each submenu that jabs into the main menu cutting off some of the text (firefox only)

2. Cut-off submenus. If the window is re-sized smaller, or on a low res screen, the submenus don't bump up or add a scroll bar, they just get cut off.

3. The extra space at the top of all menus....how do I get rid of that? where is it coming from? (firefox and IE)

mmm.... that's all I can think of! I'm pretty happy =) thanks again!

EDIT: thought of one more.... how can I get the FULL width of the submenu to change colour? (only an IE problem)



Here a link the a temp location while I debug:
http://happyhikers.ca/EternalCampaign/NewEC/


here are the relevant styles (validated..ish):

Code: Select all

.menumouseon, .menumouseoff, .submenumouseon, .submenumouseoff {
	width: 175px;
	height: 30px;
	font-family: Tempus Sans ITC; 
	font-size: 10pt;
	text-transform: uppercase; 
	text-align: left; 
	vertical-align: text-bottom;
	margin: 2px 0 2px 0;
	color: #006699; 
	font-weight: bold; 
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	background-color: #ffffff;
	white-space: normal;
	}

.submenumouseon, .submenumouseoff {
	width: 175px;
	height: 20px;
	font-size: 8pt;
	text-transform: none; 
	background-color: #eeeeee;
	/*position: relative;
	left: 20px;*/
	margin: 0 0 0 -50px !important;
	margin: 0;
	padding: 5px 0 0 30px !important;
	padding: 5px 0 0 0;
	}

.menumouseon img, .menumouseoff img {
	position: relative;
	z-index: 2;
	margin: 0px -20px 20px -30px;
	}



.menumouseon {
	color: #0000ff; 
	background-color: #eeeeee;
	}

.submenumouseon {
	color: #0000ff; 
	background-color: #cccccc;
	}

and here's the menu code for the main and first few sub menus:

Code: Select all

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


with(menuStyle=new mm_style())
{
onclass="menumouseon";
offclass="menumouseoff";
//subimage="arrow.gif";
}

with(subMenuStyle=new mm_style())
{
onclass="submenumouseon";
offclass="submenumouseoff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=-20;
orientation="vertical";
style=menuStyle;
top=0;
followscroll=-140,2,50;
aI("image=images/logo.jpg;type=header;");
aI("showmenu=Introduction;text=Introduction;url=index.php;");
aI("showmenu=Playing;text=Playing in the Campaign;url=PlayingInTheCampaign.php;");
aI("showmenu=Warlords;text=Warlord Prestige Class;url=WarlordPrestigeClasses.php");
aI("showmenu=Lieutenants;text=Lieutenants and Promotion;url=LieutenantsAndPromotions.php");
aI("showmenu=Spells;text=Spells;url=Spells.php");
aI("showmenu=MagicItems;text=Magic Items;url=MagicItems.php;");
aI("showmenu=Extensions;text=Campaign Extensions;url=Extensions.php;");
aI("showmenu=References;text=References Lists and Links;url=ReferenceLists.php;");
aI("showmenu=Acknowledgments;text=Acknowledgements;url=Acknowledgements.php;");
}



with(milonic=new menuname("Introduction")){
style=subMenuStyle;
aI("text=What's the Eternal Campaign?;url=index.php#WhatistheEternalSkirmishCampaignEC;")
aI("text=What do I need to join?;url=index.php#WhatdoIneedtojoin;")
aI("text=How do I sign up?;url=index.php#HowdoIsignupQuickStartGuide;")
}

[vikenk]

Hi,

Try changing this in your css:

Code: Select all

p, table { 
	margin-left: 20px;
	}

Since the menu is table-based, the generic styling of tables will affect the menu. Try changing that or giving the table a class. If not, add the table style to your existing style

Code: Select all

.menumouseon (add rest of styles here) table { margin-left: 0 }

Let us know how it works.

[galneweinhaw]

Wow, thanks for the quick response! I'll give it a go.

[galneweinhaw]

Setting this:

Code: Select all

.menumouseon *, .menumouseoff *, .submenumouseon *, .submenumouseoff * {
	padding: 0;
	margin: 0;
	}

fixed ALL 4 of the formatting problems I was having!

WOOT!!!!!!

thanks again!