Background and Relative position problem

[mrwhitehat@hotmail.com]

http://www.cdowk.org/stewardship_development/

BASICALLY, I can't get this menu to shift down about 5 - 15 pixels

Here is my code:

with(milonic=new menuname("Main Menu")){
style=background;
top=15;
left=0;
alwaysvisible=1;
orientation="horizontal";
position="relative";

aI("status=Click Here for news Briefs from the Office of Communications;text=NEWS BRIEFS;url=http://www.cdowk.org/news_briefs.html");
aI("status=Click Here for the Bishop's Message;text=BISHOP'S MESSAGE;url=http://www.cdowk.org/bishops_message.html");
aI("status=Click Here to find out about of Ministires in the Diocese;showmenu=other_ministries;text=OTHER MINISTRIES;");
aI("status=Click Here to find other links;showmenu=links;text=LINKS;");
aI("status=Resources;showmenu=resources;text=RESOURCES;");
}

[Ruth]

Hi,

You're putting the menu in a table so you need to follow the setup for that use. Table Bound / Relative Positioned menu So, to fix your menu, it does take some positioning when you are trying to put it in the middle of a cell, you need to:

1) remove the main menu from the top_menu_data.js file [take it totally out of it.

2) put it in it's own file, just the main menu and an ending drawMenus(); and save it [I called it top_main_data.js]

3) take the call for that top_menu_data.js file you now have in that table cell and move it back up with the other menu files, it should be the last called after the 3 base files. You'll call the top_main_data.js in the table cell. The reason for this is that the submenus have to be declared and read before the main menu is when you put it in a table.

4) Redo that table cell like this

Code: Select all

<TD vAlign=middle align=center width=758 background=stewardship_development_02.jpg height=35 border=1><table align="center" border="0" cellpadding="0" cellspacing="0" height="25">
<tr>
    <td valign="bottom"><SCRIPT language=JavaScript src="top_main_data.js" 
      type=text/javascript></SCRIPT></td>
</tr>
</table>
    </TD>

Right now you have it coded as valign=center, and align=middle, it's the other way. For anyone else who might search the forum on this, valign [vertical align] can be top middle or bottom, and align can be left, center, right, justify.

You'll note that I added a new table in the table cell and put the menu in it. What putting the extra table does is allow you to set a height for the menu table that is less than the height of that table cell [35px]. As you note I set the menu table at 25px height. This allows that menu table to be vAlign=middle. You code the menu table itself as valign=bottom, that puts the menu at the bottom of the table you just vertical aligned. I just tested it in IE, Netscape, Opera, and Firefox. It works OK in all of them.

I know it sounds confusing, I hope looking at the code makes it easier to understand. One other thing I suggest you do, which I did, is to put a style in the head setting all the margins at 0. So that all of the browsers use the same margins. I know you have it in the body, but I'm never sure what the newer browsers still accept and read.

Code: Select all

<style type="text/css">
body{margin:0px;}
</style>

Hope that helps.

Ruth