Question about putting menus in a cell

street9009 · Post by **street9009** » Mon Oct 16, 2006 8:02 pm

I have a php mysql based menu that is being put into a <td> tag. The problem I am having is this:

The positioning is spot on. The top of the menu (it's a vertical style) is at the top of the <td> tag. However, the <td> tag doesn't resize to reflect the size of the menu. Also, the menus don't fill up the menu cell horizontally.

And also, as you can see in the screenshot below, the "active" page link text is in orange, which I wanted, but the bottom border changes to that color too.

Can anyone shed any light on these problems?

Post by **Ruth** » Mon Oct 16, 2006 11:11 pm

Hi,

As to the width, try setting menuwidth="100%"; in the menu definition, where you have the position="relative";style= etc.

If that doesn't work, try setting itemwidth="100%"; up in that same area.

As to the other issues, the TD size not resizing, and the orange, we are going to have to see a test page to check on that, there are too many things, like css in particular, which could be causing that.

Ruth

street9009 · Post by **street9009** » Mon Oct 16, 2006 11:47 pm

I tried both the menuwidth and itemwidth in the style. menuwidth didn't change anything, and itemwidth made it span the entire page, no matter what the percentage was.

The page is live. The URL is http://www.buildinghosting.com/~nuccio/ss/ . This is a demo/test site for the real thing that is housed somewhere else.

vikenk · Post by **vikenk** » Tue Oct 17, 2006 12:40 am

Hi,

Is this what you want?

http://www.vikenk.com/ray/test.htm

The trick is to put the menuwidth="100%" with actual menu items, not with the menu style statements:

Code: Select all

with(milonic=new menuname("Main Menu")){
style=miniStyle;
menuwidth="100%";
alwaysvisible="1";
aI("text=Home;url=index.php;");
aI("text=News;url=index.php?news=yes;");
aI("text=NLT Parts Catalog;url=index.php?categoryID=100;");
aI("text=Special Sale Items;url=index.php?categoryID=200;");
aI("text=Portable Radios;url=index.php?categoryID=300;showmenu=Portable Radios;");
aI("text=Mobile Radios;url=index.php?categoryID=400;showmenu=Mobile Radios;");
aI("text=Stations;url=index.php?categoryID=500;showmenu=Stations;");
aI("text=Tech Specials;url=index.php?categoryID=600;");
aI("text=Service Aids;url=index.php?categoryID=700;showmenu=Service Aids;");
aI("text=Site Credits;url=index.php?show_aux_page=14;");
aI("text=M/A Com Parts;url=index.php?show_aux_page=10;");
aI("text=NLT Repair Depot;url=index.php?show_aux_page=11;");

}

I hope this works for you :>) Let me know when you're finished with the sample so I can take it down

street9009 · Post by **street9009** » Tue Oct 17, 2006 12:56 am

Looks great in IE... however look in Firefox. It spreads the entire page.

vikenk · Post by **vikenk** » Tue Oct 17, 2006 12:56 am

Sorry, I forgot about the second part to your queston:

Looking at your CSS, I can see that you have lots of hyperlink styles, for instance:

Code: Select all

#list a:hover
{	
	border-bottom: solid 1px #a00101;
}

I'm 99.9% certain that it's one of these styles that's causing the orange underline. The menu is sensitive to CSS. If you style the tags directly (ie, not creating a class or an ID), it can affect the menu. Double check your stylesheet.

Hope this helps.

street9009 · Post by **street9009** » Tue Oct 17, 2006 12:59 am

Pertaining to your second reply, I'm pretty sure it doesn't have anything to do with the external style sheet. Because if you put the menu on its own page with only the two includes and the function call, it still makes the border-bottom orange.

For instance, check it here: http://www.buildinghosting.com/~nuccio/ ... /index.php

vikenk · Post by **vikenk** » Tue Oct 17, 2006 1:18 am

Oops! You're right!

Still though, this time I got it:

Move the position="relative"; so it's right above the menuwidth="100%". The "position" variable belongs with the main menu, not the menu style. NOw you'll have this:

Code: Select all

with(milonic=new menuname("Main Menu")){
style=miniStyle;
position="relative";
menuwidth="100%";
alwaysvisible="1";
aI("text=Home;url=index.php;");
aI("text=News;url=index.php?news=yes;");
aI("text=NLT Parts Catalog;url=index.php?categoryID=100;");
aI("text=Special Sale Items;url=index.php?categoryID=200;");
aI("text=Portable Radios;url=index.php?categoryID=300;showmenu=Portable Radios;");
aI("text=Mobile Radios;url=index.php?categoryID=400;showmenu=Mobile Radios;");
aI("text=Stations;url=index.php?categoryID=500;showmenu=Stations;");
aI("text=Tech Specials;url=index.php?categoryID=600;");
aI("text=Service Aids;url=index.php?categoryID=700;showmenu=Service Aids;");
aI("text=Site Credits;url=index.php?show_aux_page=14;");
aI("text=M/A Com Parts;url=index.php?show_aux_page=10;");
aI("text=NLT Repair Depot;url=index.php?show_aux_page=11;");

}

Also, I found this: pagecolor="#FFAD19";

FFAD19 is an orange-ish color. Try removing that to see if the affects the menu. That's all I could find.

BTW, as an aside, adding a DOCTYPE statement at the top of your page will greatly help keep the page as cross-browser compatible as possible.

Hope this helps.

Code: Select all

street9009 · Post by **street9009** » Tue Oct 17, 2006 1:28 am

Well the thing is, this is php mysql based, so the menu options are stored in the database. How would I go about making this change? Do I need to change the order of the mm_styles table?

vikenk wrote:Also, I found this: pagecolor="#FFAD19";

FFAD19 is an orange-ish color. Try removing that to see if the affects the menu. That's all I could find.

I do want the orange on the text, though. This that setting. I just don't want the border-bottom changing as well.

vikenk wrote:BTW, as an aside, adding a DOCTYPE statement at the top of your page will greatly help keep the page as cross-browser compatible as possible.

Not sure what you mean by that. Can you elaborate a little? What should I change the DOCTYPE to?

Post by **Ruth** » Tue Oct 17, 2006 2:56 am

Hi,

First you need to upgrade your menu to the newest version.

Then copy the following and try it. I only pasted the style and main menu.

Code: Select all

with(miniStyle=new mm_style()){
oncolor="#FFFFFF";
onbgcolor="#000000";
offcolor="#FFFFFF";
offbgcolor="#DCE9F0";
padding=2;
separatorcolor="#FFFFFF";
separatorsize=1;
bgimage="bgmen.jpg";
subimage="whitearrowtransp.gif";
bordercolor="#FFFFFF";
borderwidth=1;
borderstyle="solid";
fontstyle="normal";
headerbgcolor="#FFFFFF";
headercolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
pagebgcolor="#82B6D7";
pagecolor="#FFAD19";
subimagepadding=2;
rawcss="padding-left:20";
pageborder="1px solid #FFFFFFF";
headerborder="1px solid #FFFFFF";
}

with(milonic=new menuname("Main Menu")){
style=miniStyle;
alwaysvisible=1;
position="relative";
menuwidth="100%";
aI("text=Home;url=index.php;");
aI("text=News;url=index.php?news=yes;");
aI("text=NLT Parts Catalog;url=index.php?categoryID=100;");
aI("text=Special Sale Items;url=index.php?categoryID=200;");
aI("text=Portable Radios;url=index.php?categoryID=300;showmenu=Portable Radios;");
aI("text=Mobile Radios;url=index.php?categoryID=400;showmenu=Mobile Radios;");
aI("text=Stations;url=index.php?categoryID=500;showmenu=Stations;");
aI("text=Tech Specials;url=index.php?categoryID=600;");
aI("text=Service Aids;url=index.php?categoryID=700;showmenu=Service Aids;");
aI("text=Site Credits;url=index.php?show_aux_page=14;");
aI("text=M/A Com Parts;url=index.php?show_aux_page=10;");
aI("text=NLT Repair Depot;url=index.php?show_aux_page=11;");

}

As to the orange color it is because the word separatorcolor was not spelled correctly.

Also, note that you have coded pageborder and headerborder incorrectly. Those borders as with off and onborder require that you use a css style code i.e. headerborder="1px solid #ffffff"; same for pageborder and onborder and offborder.

Below my name are some links to style, menu and item properties. Most of them have examples or explanations on how to set up.

Hope this helps. Took me awhile to find it, I almost reported it as a bug!

Ruth

vikenk · Post by **vikenk** » Tue Oct 17, 2006 3:29 am

Hello,

First, go with Ruth's suggestions. She did a good job finding the small errors, so put in the code she suggested.

street9009 wrote:Well the thing is, this is php mysql based, so the menu options are stored in the database. How would I go about making this change? Do I need to change the order of the mm_styles table?

PHP should have nothing to do with this. If you look at your code, you'll realize that you've put the entire menu code in your HTML. The menu code isn't being generated by the PHP, so all you have to do is move the line over as I had previously mentioned.

street9009 wrote:Not sure what you mean by that. Can you elaborate a little? What should I change the DOCTYPE to?

This isn't quite the forum for this but I'll try to put in a nutshell for you :>) The DOCTYPE declaration defines the rules as to how a web browser will interpret the code. Without a DOCTYPE, web browsers are free to interpret the code as they wish (this is known as "quirks mode"). Internet Explorer is legendary for having many quirks in interpreting code. Inserting the DOCTYPE at the top of your page forces all the browsers to follow the same set of rules and definitions. Although the pages won't match exactly, you'll have fewer problems with the website looking different in Firefox vs Internet Explorer. For more, see here:

http://www.alistapart.com/articles/doctype
http://css.maxdesign.com.au/listamatic/ ... xmodel.htm

I hope this helps.

street9009 · Post by **street9009** » Tue Oct 17, 2006 4:59 pm

First off, thanks. You two are awesome.

They are now working almost perfectly

One more question, there's a little line that extends from the top border of each menu item when you hover over it. Any ideas what's causing that?

Other than that, they look GREAT and are exactly where I want them. THANK YOU THANK YOU THANK YOU. These are going to be purchased, just wanted to make sure they could be integrated into this project first.

Much appreciated again.

street9009 · Post by **street9009** » Tue Oct 17, 2006 5:10 pm

Well, it appears I spoke too soon.

The line I'm talking about appears in FF only.

Now there are bigger problems in IE. When you click an item inside a one or two-deep menu, there are bizzarre results. The menu stretches all the way across the page, and sometimes takes the table cell with it, and in others just covers everything up.

Any ideas what's wrong?

vikenk · Post by **vikenk** » Tue Oct 17, 2006 5:19 pm

street9009 wrote: One more question, there's a little line that extends from the top border of each menu item when you hover over it. Any ideas what's causing that?

That problem can be found in your style sheet. I found this reference:

Code: Select all

#menu a
{
	display: block;
	text-align: left;
	color: #FFFFFF;
	/*background-color: #aa0000;*/
	border-top: solid 1px #FFFFFF;
	border-bottom: solid 2px #000000;
	text-decoration: none;
	padding-left: 20px;
	background-image: url(images/bgmen.jpg);
}
#menu a:hover
{
	background-color: #000000;
	background-image: url(images/bgmenh.jpg);
}

In that menu style you have "border-top: solid 1px #FFFFFF". Since the menu is placed in the table, the hyperlink style applies to the menu as well. When you hover over the link, you get the white border on top.

When I removed that line from your stylesheet, the problem went away.

Hope this helps.

vikenk · Post by **vikenk** » Tue Oct 17, 2006 5:25 pm

street9009 wrote:Now there are bigger problems in IE. When you click an item inside a one or two-deep menu, there are bizzarre results. The menu stretches all the way across the page, and sometimes takes the table cell with it, and in others just covers everything up.

Any ideas what's wrong?

I'm not getting any weird operation. The menu operates smoothly in Firefox and in IE. If you notice, you're getting black borders at the bottom of the link when you hover over it as well. This can again be traced to the #menu style.

street9009 · Post by **street9009** » Tue Oct 17, 2006 6:14 pm

vikenk wrote:
street9009 wrote:Now there are bigger problems in IE. When you click an item inside a one or two-deep menu, there are bizzarre results. The menu stretches all the way across the page, and sometimes takes the table cell with it, and in others just covers everything up.

Any ideas what's wrong?
I'm not getting any weird operation. The menu operates smoothly in Firefox and in IE. If you notice, you're getting black borders at the bottom of the link when you hover over it as well. This can again be traced to the #menu style.

Alright, I'll try removing that style. However, open the site in IE and go to Mobile Radios > Cables. Notice the behavior there. Then go to Mobile Radios > Cables > Power Cables. Notice the behavior there. Both are similar but slightly different. It also appears to be intermittent. Sometimes it does it and sometimes it doesn't. Like this time when it loaded it stretched the whole page when it first loaded, then a refresh put it back.

It's behaving quite strangely.

vikenk · Post by **vikenk** » Tue Oct 17, 2006 6:27 pm

Hmmm.....I'm not getting any weird behavior. What version of IE are you using and what is your screen resolution? Mine is 1024x768.

Here's a cropped screenshot of what I see:

It's like this in Firefox and in IE.

street9009 · Post by **street9009** » Tue Oct 17, 2006 6:31 pm

vikenk wrote:Hmmm.....I'm not getting any weird behavior. What version of IE are you using and what is your screen resolution? Mine is 1024x768.

Here's a cropped screenshot of what I see:

It's like this in Firefox and in IE.

Did you try clicking that link though? Actually having the page move?

I think the problem is simply this (though I have no idea how to fix it).

The menus are loading pre-maturely. Sometimes I get the MILONIC link at the top because the menus load before the link at the bottom. Same with the other two behaviors. Behavior #1 (menus stretching entire page and not being relatively positioned in the table cell) is happening when things don't load in time and behavior #2 (menus stretching the table cell to width of entire page but being relatively positioned) is the same.

What say you?

vikenk · Post by **vikenk** » Tue Oct 17, 2006 6:44 pm

Well, I'm afraid I don't know much about PHP, but if you suspect a timing issue you can try to move the script files to the bottom of the page just before the </body> tag. That will make it the last item to load.

That would at least verify if it's a timing issue or not. Move these files down to the bottom:

Code: Select all

<script language="JavaScript" src="http://www.buildinghosting.com/~nuccio/menus/milonic_src.js" type='text/javascript'></script>	
<script language="JavaScript">
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=http://www.buildinghosting.com/~nuccio/menus/mmenuns4.js><\/scr"+"ipt>");		
  else _d.write("<scr"+"ipt language=JavaScript src=http://www.buildinghosting.com/~nuccio/menus/mmenudom.js><\/scr"+"ipt>"); 
</script>

I'm not certain that will work, but you could give it a shot. It does seem like the code isn't being parsed in time, though.

Maybe John can help more. John's more experienced with PHP.

street9009 · Post by **street9009** » Tue Oct 17, 2006 6:53 pm

Good thought, but when you do that javascript doesn't know what to do with the milonic code inside the table cell.

I really thought that was going to fix it :/