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

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

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

Poster: galneweinhaw
Dated: Saturday April 1 2006 - 22:11:53 BST

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:

.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:

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

Poster: vikenk
Dated: Saturday April 1 2006 - 22:19:12 BST

Hi,

Try changing this in your css:

Code:

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:

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

Let us know how it works.

Poster: galneweinhaw
Dated: Saturday April 1 2006 - 22:28:46 BST

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

Poster: galneweinhaw
Dated: Sunday April 2 2006 - 0:15:39 BST

Setting this:

Code:

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

fixed ALL 4 of the formatting problems I was having!

WOOT!!!!!!

thanks again!

Industrial Strength JavaScript and DHTML Menus

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