submenu position problems with css

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

submenu position problems with css

Poster: bluecrane
Dated: Thursday August 14 2003 - 7:23:20 BST

Greetings all,
My first post so go easy on me...I'm having a problem with submenus and their postion in relation to the parent. It appears what is causing the problem is a css that I have defined for the web project that I'm working on.

Here's a site that has what I'm talking about: http://www.venomdirect.com/menu.htm And the code fragments that show the problem are below. Without the css file the demo menu works fine...with the css file the submenus have bad offsets.

The problem has got to be in the top and left values within the lh-col section of the css I just don't know how to fix it.
TIA!

Code:

css:
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

<pre>#hdr{
        height:30px;
        background:#9D9C63;
        color:#000000;
        border:solid #000000;
        border-width:2px 0px;
        margin:40px 0 0 0;
        }

#lh-col{
        position: absolute;
        top: 160px;
        left: 20px;
        width: 180px;
        margin: 0;
        padding: 0;
        }

#rh-col{
        margin: 8px 20px 20px 200px;
        border: 2px solid #000000;
        background: #ffffff;
        color: #333333;
        position :relative;
        padding: 20px;
        }
</pre>

</body>

</html>

------------------------------------
menu.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head> 
<link rel="stylesheet" type="text/css" href="my.css" />
</head>

<div id="lh-col">
<body>
<!-- left column -->
  <SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>
  <SCRIPT language=JavaScript src="vertical_data.js" type=text/javascript></SCRIPT>
</body>
</div>
</html>
---------------------------------------
vertical_data.js:
_scrollAmount=3      // Used for Netscape 4 scrolling
_scrollDelay=20        // Used for Netscape 4 scrolling

_menuCloseDelay=500  // The delay for menus to remain visible on mouse off
_menuOpenDelay=150   // The delay for opening menus on mouse over
//_followSpeed=0       // Follow Scrolling speed (higher number makes the scrolling smoother but slower)
//_followRate=0        // Follow Scrolling Rate (use a minimum of 40 or you may experience problems)
_subOffsetTop=5;     // Sub menu offset Top position
_subOffsetLeft=-10;  // Sub menu offset Left position


with(mainStyle=new mm_style()){
     onbgcolor = "#6699cc";
       oncolor = "#00ffff";
    offbgcolor = "#3366cc";
      offcolor = "#ffff66";
   bordercolor = "black";
   borderstyle = "solid";
separatorcolor = "black";
 separatorsize = 1;
       padding = 4
       onborder="2px solid black"
      fontsize = "75%";
     fontstyle = "normal";
    fontweight = "normal";
    fontfamily = "verdana, tahoma, arial";
   high3dcolor = null; // Not sure if this will be included in final release
    low3dcolor = null; // Not sure if this will be included in final release
     pagecolor = "purple";
   pagebgcolor = "pink";
   topbarimage = "images/arrowdn.gif";
topbarimageloc = "center;middle"
      subimage = "images/arrow.gif";
   subimageloc = "center;middle"
  //ondecoration = "underline"
  //onbold = true;
  //onitalic = true;
}

with(milonic=new menuname("mainmenu2")){_c=1
top = 24;
left = 3;
//itemwidth=60
//menuwidth="99%";
borderwidth = 1;
//screenposition = "center;middle";
//alignment="center";
style = mainStyle;
alwaysvisible = 1;
followscroll = "1,50,2"
//orientation="horizontal"
//filter = null;
//followscroll = null;
//keepalive = 1;
//overallwidth = null;
//righttoleft = null;
//itemheight=200;
//openonclick = null;
//bgimage="winxp_back.gif";
//position="relative"
//separatorcolor="green";
aI("itemwidth=200;text=Milonic Home Page;url=http://www.milonic.com/");
aI("text=Support;showmenu=support menu");
aI("text=Local Samples;showmenu=LOCALSAMPLES");
aI("text=Online Samples;showmenu=onlinesamples");
}

   with(milonic=new menuname("support menu")){_c=1
   borderwidth = 1;
   style = mainStyle;
   overfilter="Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
   outfilter="randomdissolve(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
   aI("text=Milonic Disussion Forum;url=http://www.milonic.com/menu/forum");
   aI("text=Menu Support Mailing List;url=/mailman/listinfo/menu-dev;target=_blank");
   aI("text=Paid Support Page;url=http://www.milonic.com/menu/reqhelp.php");
   aI("text=Frequently Asked Questions;url=http://www.milonic.com/menu/faq.php");
   aI("text=Version Information;url=http://www.milonic.com/menu/versioninfo.php");
   aI("text=Licensing;showmenu=licensing");
   }
   
      with(milonic=new menuname("licensing")){_c=1
      borderwidth = 1;
      itemwidth=200;
      alignment="center";
      style = mainStyle;
      margin=3
      overfilter="Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
      outfilter="randomdissolve(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
      aI("text=License Agreement;url=http://www.milonic.com/menu/license.php");
      aI("text=Purchase a License In Order To use This Menu;url=http://www.milonic.co.uk/menu/supportcontracts.php");
      aI("text=Milonic's Privacy Policy;url=http://www.milonic.com/menu/privacy.php");
      aI("text=Contact Milonic Solutions;url=http://www.milonic.com/menu/privacy.php;");
      }
      
      
   with(milonic=new menuname("localsamples")){_c=1      
   itemwidth = 200;
   borderwidth = 1;
   style = mainStyle;
   margin=3
   overfilter="Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
   outfilter="randomdissolve(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
   aI("text=Horizontal Menu;url=horizontal.htm");
   aI("text=Vertical Menu;url=menu.htm");
   aI("text=XP Style Menu;url=xpmenu.htm");
   aI("text=Embedded Inside a Table;url=table.htm");
   aI("text=Relatively Positioned Menu;url=relative.htm");
   aI("text=Right To Left;url=rtl.htm;");   
   }


   with(milonic=new menuname("OnlineSamples")){_c=1      
   borderwidth = 1;
   style = mainStyle;
   overfilter="Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
   outfilter="randomdissolve(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
   aI("text=None Been Done yet Folks, Sorry<br><br>More will follow shortly;type=header");
   }

for(_a=_mnucnt;_a<_m.length;_a++){_drawMenu(_a)}   

Poster: Maz
Dated: Thursday August 14 2003 - 8:02:20 BST

:roll:

Showmenu names don't match... one has a space, caps and no caps.
Hope that's all it is

Poster: bluecrane
Dated: Thursday August 14 2003 - 13:52:47 BST

Morning maz,
The problem happens on my real code as well. The code fragments (and site sample) are from Andy's demo code with changes to include the css.

In any case it looks like the showmenu names are case insensitive.
cheers,
-bluecrane

Poster: John
Dated: Thursday August 14 2003 - 14:57:16 BST

Is what you show as "css:" supposed to be your my.css file? If so, I don't recognize that as a css file (I'm by no means a css guru, but I do use it every day).

A css file should be only css statements, not an HTML file. In your case...

Code:

#hdr{ 
        height:30px; 
        background:#9D9C63; 
        color:#000000; 
        border:solid #000000; 
        border-width:2px 0px; 
        margin:40px 0 0 0; 
        } 

#lh-col{ 
        position: absolute; 
        top: 160px; 
        left: 20px; 
        width: 180px; 
        margin: 0; 
        padding: 0; 
        } 

#rh-col{ 
        margin: 8px 20px 20px 200px; 
        border: 2px solid #000000; 
        background: #ffffff; 
        color: #333333; 
        position :relative; 
        padding: 20px; 
        }

That's it.

Not sure about case sensitivity, but I think I'd make them match anyway.

Poster: bluecrane
Dated: Thursday August 14 2003 - 15:10:04 BST

Hey John,
How bizarre, my "real" css file doesn't have the embedded html...I removed the html stuff from the css file on the sample site and still have the same problem.

I completely agree with yours and maz's comment regarding case for the showmenu, my point was that I was using excerpts from Andy's demo code.

I forgot to mention in my first posting what a cool product the menu is. There are simply too many other satisfied users for this to be a bug...just can't find my darn problem.
regards,
-bluecrane

Poster: John
Dated: Thursday August 14 2003 - 15:34:40 BST

Couple thoughts (from far out in left field!)...

1. Can you specify a <div> before the <body>; i.e., shouldn't it be body/div?

2. You show a subOffset spec in the code for both top and left. Could this be messing with the css (or vice-versa)? REM them both out and see what happens.

3. As for case, Andy probably has that covered, but out of habit I just like to keep things the same.

He's on this section right now. Maybe he'll straighten us both out!

Poster: bluecrane
Dated: Thursday August 14 2003 - 16:11:16 BST

John,
Also forgot to thank you and others on this group for the help you have/are providing to myself as well as others :!:

On your first thought: I moved the body tag outside of the div tag and still no luck.

2nd: I commented out both "_subOffsetTop=5;" and "_subOffsetLeft=-10;" (I think that is what you wanted)...also doesn't work.

Some observations:
1) _subOffsetTop and _subOffsetLeft "appear" to have no effect on the results of my test on the test site.

2) However, changes to both Top and Left in the lh-col section of the css file DO adversely effect the submenu. (basically what you surmised above). To demonstrate, I changed my.css lh-col section top=10 instead of top=160 and you will note that the submenu does look closer to the parent however still not where you would want it. See sample site to observe: http://www.venomdirect.com/menu.htm The higher value of "top" the greater the offset of submenu.

I really need to absolutely position the left hand column (lh-col) and menu and I would like to do it in the css file...just don't know how to get around the conflicts.
cheers,
-bluecrane

Poster: fredlongworthhighschool
Dated: Thursday August 14 2003 - 16:19:03 BST

You're right. It's a very powerful and stable menu system. The fault is probably too many tweakable options for us mere mortals!

Out of all the problems I've seen on this forum, none have been due to bugs in the software.

Poster: John
Dated: Thursday August 14 2003 - 16:28:40 BST

Big difference. Maybe just a little more tweaking in the css will bring it home.

Andy (above) is correct. It's extremely rare for there to be a bug in the menu code itself. Typically it's a browser fault (which Andy (other Andy) seems to always find a workaround for), or (I hate to say this) - us! This thing can be a bear to fully understand, and I hate to think what it's like writing it :!:

Keep at the css and let us know what happens.

Poster: bluecrane
Dated: Thursday August 14 2003 - 16:41:03 BST

My biggest concern here is that changes in the .css file are effecting the submenu where the behavior should be derived from the menu config file, in this case: vertical_data.js. There is a relationship between my css file and the vertical_data.js file that I'm simply not understanding.

As you can probably tell I'm new to the web authoring gig however I do have an extensive background in application development...which leads me to the questions:
1) Is this a scoping problem?
2) Since I'm putting the menu in the lh-col section (through html usage of the class within the css) the section's top and left seem to coincide with the menu's top and left...how can I limit the scope of either so that the values are treated separately?

Poster: Maz
Dated: Thursday August 14 2003 - 17:30:24 BST

Good Morning bluecrane

Positioning of my second menu made no sense at all and I had to individually place the offset values.

Although I have no clue as to what you are talking about now, I think that position="relative"; is a bag of worms, have you considered adoption?

maz
Is it the journey or the destination?

Poster: bluecrane
Dated: Thursday August 14 2003 - 18:02:41 BST

Hey maz,
Thanks for the input. I think that I have arrived at a solution based upon other posts found in this forum.

Since the conflicts are occuring between my css file and the menu config file vertical_data.js I have added Top and Left with offset values to the submenu. Not the elegant solution I had hoped for but it works.

To illustrate, see the code fragment. Note that on the test site, http://www.venomdirect.com/menu.htm, that I have only changed the first menu item (Support) that has a submenu...the other menu items are unchanged.

Code:

   with(milonic=new menuname("support menu")){_c=1
   top = "offset=-10";
   left = "offset=-20";
   borderwidth = 1;
   style = mainStyle;
   overfilter="Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
   outfilter="randomdissolve(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
   aI("text=Milonic Disussion Forum;url=http://www.milonic.com/menu/forum");
   aI("text=Menu Support Mailing List;url=/mailman/listinfo/menu-dev;target=_blank");
   aI("text=Paid Support Page;url=http://www.milonic.com/menu/reqhelp.php");
   aI("text=Frequently Asked Questions;url=http://www.milonic.com/menu/faq.php");
   aI("text=Version Information;url=http://www.milonic.com/menu/versioninfo.php");
   aI("text=Licensing;showmenu=licensing");
   }

This is really only a hack to get it to work. If I decided to change values within the css file I'd have to also change values in the vertical_data.js file (through trial and error).

I'd still love to hear ideas from others on how I could limit the scope effect of the css file.

regards,
-Troy

Industrial Strength JavaScript and DHTML Menus

submenu position problems with css