Center Menu - Netscape & Mozilla

jchastain · Post by **jchastain** » Mon Mar 15, 2004 12:47 am

I have a menu that is placed inside of a <div tag. The <div tag has a style of text-align: center;. The menu itself uses the screenposition="center"; attribute.

In IE, the menu is centered on the screen. In Netscape 7 or Mozilla, the menu does not center - i.e. left justified.

Any solutions on making this menu center for all browsers?

Thanks
-- Jeff

Post by **Ruth** » Mon Mar 15, 2004 1:12 am

A url to see the problem would help so the full code could be seen, in case it's something besides the div that's causing the problem, like something in styles etc.

Ruth

jchastain · Post by **jchastain** » Mon Mar 15, 2004 1:32 am

Unfortunately, the site is behind a firewall and not visible to the general public. I have posted bits of code below that hopefully will help.

Thanks
-- Jeff

Code: Select all

Code:

<body>
	.......
	<div id="pageNavigation">
		<div id="pageNavigation2">
			<script type="text/javascript">

				_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
				_menuOpenDelay=150            // The time delay before menus open on mouse over
				_followSpeed=5                // Follow scrolling speed
				_followRate=40                // Follow scrolling Rate
				_subOffsetTop=10              // Sub menu top offset
				_subOffsetLeft=-10            // Sub menu left offset
				_scrollAmount=3               // Only needed for Netscape 4.x
				_scrollDelay=20               // Only needed for Netcsape 4.x

				// define home page menu styles
				with(ghMenuStyle = new mm_style()) {
					onbgcolor="#2F4F6F";
					oncolor="#FFFFFF";
					offbgcolor="#000000";
					offcolor="#F0F0F0";
					bordercolor="#778899";
					borderstyle="solid";
					borderwidth=1;
					separatorcolor="#778899";
					separatorsize="1";
					padding="4";
					margin="0";
					fontsize="10px";
					fontstyle="normal";
					fontfamily="Verdana, Tahoma, Arial";
					outfilter="randomdissolve(duration=0.3)";
				}

				// top level menu
				with(milonic=new menuname("ghSecureMenu")) {
					style=ghMenuStyle;
					align="center";
					screenposition="center";
					alwaysvisible=1;
					orientation="horizontal";
					position="relative";
					itemheight="100%";
					itemwidth="125px";
					aI("text=My Community;showmenu=myCommunity;");
					aI("text=Communicate;showmenu=communicate;");
					aI("text=Documents;showmenu=documents;");
					aI("text=Manage;showmenu=manage;");

				}

				// myCommunity menu
				with(milonic=new menuname("myCommunity")) {
					style=ghMenuStyle;
					align="left";
					itemwidth="175px";
					aI("text=Home;url=community.cfm?method=community.home;");
					aI("text=My Profile;url=community.cfm?method=user.profile;");
					aI("text=Logout;url=community.cfm?method=security.logout;");
				}

				// communicate menu
				with(milonic=new menuname("communicate")) {
					style=ghMenuStyle;
					align="left";
					itemwidth="175px";
					aI("text=Community Directory;url=community.cfm?method=directory.home;");
					aI("text=Community Calendar;url=community.cfm?method=calendar.month;");
					aI("text=News & Announcements;url=community.cfm?method=news.home;");
				}


				// documents menu
				with(milonic=new menuname("documents")) {
					style=ghMenuStyle;
					align="left";
					itemwidth="175px";
					aI("text=Architectural Guidelines;url=community.cfm?method=binder.home&folderID=18;");
					aI("text=Request for Home Improvement Approval;url=community.cfm?method=binder.home&folderID=21;");
					aI("text=Miscellaneous Documents;url=community.cfm?method=binder.home&folderID=20;");
				}

				// manage menu
				with(milonic=new menuname("manage")) {
					style=ghMenuStyle;
					align="left";
					itemwidth="175px";
					aI("text=Community Management;url=community.cfm?method=commAdmin.home;");
				}

				drawMenus();
			</script>

			<div class="clear"></div>
		</div>
	</div>
	.......
</body>

----------------------------------

styles:

body {
	font: 8pt/12pt verdana;
	color: #000000;
	background: #2F4F6F;
	margin: 0px;
	}
div {
	font: 8pt/12pt verdana;
	}
#pageNavigation {
	background-color: #000000;
	border-top: 1px solid #778899;
	border-bottom: 1px solid #778899;
	margin: 0px;
	padding: 3px;
	text-align: center;
	min-height: 25px;
	}
#pageNavigation2 {
	text-align: center;
	}

Post by **Ruth** » Mon Mar 15, 2004 2:05 am

Well, I don't know if there's a way to define an object align in the div, since i guess the menu is an object and not viewed as text in css code? I did try putting center tags

Code: Select all

<center> <script type="text/javascript"> 

            _menuCloseDelay=500  there rest of the stuff .... 

drawMenus(); 
         </script> </center>

and that worked in nn7.1, opera 7, firebird .07. I don't know that it would validate but it does center the menu.

Ruth

jchastain · Post by **jchastain** » Mon Mar 15, 2004 2:14 am

Thanks. I figured I could do it that way, I was just looking for a 'compliant' way. I have not dug into the code yet, but how is the menu structure built? Is the outside container a <div? I assume (hope) there are no tables involved.

Thanks
-- Jeff

Post by **Ruth** » Mon Mar 15, 2004 2:51 am

I'm sorry Jeff, you are speaking to a 'code-illiterate' or maybe that should be a programming-illiterate I have noooo idea how it's built.

Well, a lot of time, hardwork and sweat by these great guys at milonic!! They seem to have made this thing capable of jumping through hoops if we want it. But as to it's components, I remember seeing some comment to someone about divs. Sorry.

Ruth