Submenu alignment in IE

mqcarpenter · Post by **mqcarpenter** » Tue Feb 07, 2006 9:44 pm

I have looked at a few suggestions on the board and do not like what I see on the submenu alignment problem I have. I need to maintain the DIV structure and do not want to use tables if possible. My CSS needs cleanup but could someone give me an idea on the subs for this menu in IE? Thank you

http://www.returnofthechampions.com

mqcarpenter · Post by **mqcarpenter** » Tue Feb 07, 2006 10:59 pm

I will note that I removed ALL settings in my JS file and am controlling the menu strictly through CSS. This is the information related to the menu behavior:

Code: Select all

.menuOff7 { margin: 0 0 0 15px; color: #594737; padding-bottom: 3px; font-size: 16px; font-family: Georgia, "New Century Schoolbook"; font-weight: bold; text-decoration: none;} 
.menuOn7 { margin: 0 0 0 15px; color: #594737; padding-bottom: 3px; font-size: 16px; font-family: Georgia, "New Century Schoolbook"; font-weight: bold; background: url(/img/_under01.gif) repeat-x 100% 100%;      }
.menuOff7a { margin: 0 0 0 5px; color: #594737; padding-bottom: 3px; font-size: 11px; font-weight: bold; text-decoration: none; background: url(/img/submenu01.gif) repeat-x 100% 100%; } 
.menuOn7a { margin: 0 0 0 5px; color: #594737; padding-bottom: 3px; font-size: 11px; font-weight: bold; text-decoration: none; background: url(/img/submenu02.gif) repeat-x 100% 100%; }

Migru · Post by **Migru** » Tue Feb 07, 2006 11:07 pm

Hi

did you check if you could take the menu out from the div and position it absolute using top= : and left= ; ??

Michael

mqcarpenter · Post by **mqcarpenter** » Wed Feb 08, 2006 12:07 am

Migru wrote:Hi

did you check if you could take the menu out from the div and position it absolute using top= : and left= ; ??

Michael

Where does that position information go?

mqcarpenter · Post by **mqcarpenter** » Wed Feb 08, 2006 12:13 am

I put this in the main menu reference and it did not resolve the submenu position, but moved the main menu to the top of the window:

Code: Select all

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

with(menuStyle7=new mm_style()){
offclass="menuOff7";
onclass="menuOn7";
}

with(menuStyle7a=new mm_style()){
offclass="menuOff7a";
onclass="menuOn7a";
fontsize="100%";
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
top=0;
left=0;
style=menuStyle7;
aI("status=Back To Home Page;text=home;url=http://milonic.com/;");
aI("text=home;url=/;");
aI("showmenu=league;text=league;");
aI("showmenu=teams;text=franchises;");
aI("showmenu=leaguestats;text=league stats;");
aI("text=player stats;url=/stat_players.php");
aI("showmenu=manage;text=manage;");
aI("text=smack;url=/f0rum");
}

Migru · Post by **Migru** » Wed Feb 08, 2006 2:16 am

Hi

no, what I meant was, try as follows:

take the menu out from the div and place the code next to the <body> tag :

Code: Select all

<body>
script type="text/javascript" src="milonic_src.js"></script>	
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");		
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="menu_data.js"></script>

In the main menu, replace top=0; with top=150; and add screenposition="center";
(I´ve not checked if 150 is ok, but I just estimated "150".)

An alternative method is to use relative positioning, though it is recommended for the use in tables, I´ve never tested that with divs.
It is explained here

http://milonic.com/menusample9.php

It might work with divs too, but might create problems when used in different browsers.

Michael

mqcarpenter · Post by **mqcarpenter** » Thu Feb 09, 2006 3:07 pm

It is not where I wanted it, but I moved the menu to the top and used that technique and it is working. THank you for the help!

Post by **Ruth** » Thu Feb 09, 2006 3:12 pm

Hi,

One other thing that you can try, which many have used who want to use divs and have a similar layout, is to set the top part as a table which includes the menu, and then start the divs below that.

Ruth