Submenu placing problem for pages wider than the screen size

[Craigskelton]

Hi,

I'm having a problem creating a right-aligned help menu for a webpage that is wider than the width of the screen. Basically the menu places itself correctly, but the submenu does not. I can't link to the page itself, since it's full of sensitive data and whatnot. I've attached a pic with all the data cut out that demonstrates the issue.

I'm assuming this is just some problem with the .css or a setting or something, so here's all the relevant code, etc.

my .css:

Code: Select all

masterbody {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
	/*height: 100%;*/
	height:auto;
	position: absolute;
	top: 0;
    left: 0;
}

table.toplevel 
{
	min-height: 100%;
	height: auto;
	width: 100%; 
	/*height: 100%;*/
	height:auto;
    margin: 0;
    padding: 0;
    border: none;
}

table.toplevel td.content {
	PADDING-RIGHT: 10px; 
	PADDING-LEFT: 10px; 
	PADDING-BOTTOM: 10px; 
	PADDING-TOP: 10px;
	vertical-align:top;
	text-align:left;
	/*height: 100%;*/
	height:auto;
	border: 2;
	
}

table.header {
	padding: 0;
	border: 0;
	margin: 0;
	border-spacing: 0px;
	border-width: 0px;
	border-color:#000033;
	background-color:#000033;
	height: 68; 
	width: 100%;
}

table.header tr {
	/*background-color:#000033;*/
}

table.header td.logo {
	PADDING-RIGHT:5px; 
	PADDING-LEFT:5px; 
	PADDING-BOTTOM:5px; 
	PADDING-TOP:5px;
	vertical-align:middle;
	text-align:left;
}

table.header td.menu 
{
	background-color:#dddddd;
}

table.header td.body {
	PADDING-RIGHT:10px;
	PADDING-LEFT:10px;
	PADDING-BOTTOM:10px;
	PADDING-TOP:10px;
	TEXT-ALIGN:right;
}

table.header td p.thin {
	FONT-SIZE: 14pt;
	COLOR: white;
	font-weight: bold;
}

table.footer {
	width: 100%;
	/*position:absolute;*/
	padding: 0;
	margin: 0;
	bottom: 0;
	background-color:#000033;
}

table.footer td
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	color: white; 
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}

img
{
 border-style: none;
} 

span.fade
{
	font-size: 8pt;
	font-style: normal;
	color: gray; 
}

.allocation
{
	font-size: 8pt;
	font-style: normal;
	width: 35px;
	text-align:right;
}

table.report th.toplevel   
{
	background-color:#999999;
}

table.report th.sublevel   
{
	background-color:#000000;
}
    
table.report th.sublevel font  
{
	color:#FFFFFF; font-size:12pt;
}

table.report td   
{
	font-size:8pt; 
	font-family:verdana;
}

td.content div.normal
{
	overflow:auto; 
	height: 100%; 
	width: 100%;
}

td.content div.printable
{
	overflow:visible; 
	height: 100%; 
	width: 100%;
}

The menu-generating .js file, which we have renamed to shadowbeta.js (the menu giving trouble is the help menu):

Code: Select all

function create_menu_style()
{
    _menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
    _menuOpenDelay=150            // The time delay before menus open on mouse over
    _subOffsetTop=10              // Sub menu top offset
    _subOffsetLeft=-10            // Sub menu left offset
    
    with(menuStyle=new mm_style()){
    onbgcolor="#4F8EB6";
    oncolor="#ffffff";
    offbgcolor="#DCE9F0";
    offcolor="#515151";
    bordercolor="#296488";
    borderstyle="solid";
    borderwidth=1;
    separatorcolor="#2D729D";
    separatorsize="1";
    padding=5;
    fontsize="12px";
    fontstyle="normal";
    fontfamily="Verdana, Tahoma, Arial";
    pagecolor="black";
    pagebgcolor="#82B6D7";
    headercolor="#DDDDDD";
    headerbgcolor="#1177AA";
    //subimage="images/arrow.gif";
    subimagepadding="2";
    overfilter="Fade(duration=0.2);Alpha(opacity=100);Shadow(color='#777777', Direction=135, Strength=5)";
    outfilter="randomdissolve(duration=0.3)";
    }
}

function create_navigation_menus()
{
    with(milonic=new menuname("Main Menu")){
        style=menuStyle;
        top=10;
        left=10;
        alwaysvisible=1;
        orientation="horizontal";
        //menuwidth="100%";
        menualign="left";
        position="relative";
        aI("text=Search;showmenu=Search;status=Search;");
        aI("text=Administration;showmenu=Administration;status=Administration;");
    }
    
    with(milonic=new menuname("Search")){
        style=menuStyle;
        //alwaysvisible=1;
        aI("text=Search;url=TradeSearch.aspx;");
    }
    
    with(milonic=new menuname("Administration")){
        style=menuStyle;
        //alwaysvisible=1;
        aI("text=Shadow Account Mappings;url=ShadowAccountMappings.aspx;");
        aI("text=Shadow Accounts;url=ShadowAccounts.aspx;");
    }
    drawMenus();
}

function create_help_menus()
{
    with(milonic=new menuname("Help Menu")){
        style=menuStyle;
        top=10;
        left=10;
        alwaysvisible=1;
        orientation="horizontal";
        menualign="right";
        position="relative";
        screenposition="right";
        aI("text=Help&nbsp&nbsp&nbsp showmenu=Help;status=Help;");
    }
    with(milonic=new menuname("Help")){
        style=menuStyle;
        //alwaysvisible=1;
        aI("text=Release Notes&nbsp&nbsp&nbsp url=ReleaseNotes.aspx;");
        aI("text=Business Logic&nbsp&nbsp&nbsp url=BusinessLogic.aspx;");
    }
    drawMenus();
}

finally, we use a master page for the menus, which is nice since it makes it really easy to give all the pages in an app the same menus. Here's the master page that contains the menus (the important bit is create_help_menus();):

Code: Select all

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Web_MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head" runat="server">
  <title>Shadow Beta Server</title>
  
  <link href="css/shadow.css" type="text/css" rel="stylesheet" />  
  
  <script src="<%=Request.ApplicationPath%>/js/milonic_src.js" language="javascript" type="text/javascript"></script>
  <script src="<%=Request.ApplicationPath%>/js/tooltips.js" language="javascript" type="text/javascript"></script>
  <script src="<%=Request.ApplicationPath%>/js/mmenudom.js" language="javascript" type="text/javascript"></script>
  <script src="<%=Request.ApplicationPath%>/js/shadowbeta.js" language="javascript" type="text/javascript"></script>

  <script language="javascript" type="text/javascript">
  <!--
  create_menu_style();
  //-->  
  </script>  
</head>
<body class="masterbody" onunload="UnloadPopupPicker();">
  <table class="toplevel" border="0">
    <tr>
      <td>
      <!-- create a header tag -->
      <table class="header" border="0">
        <tr>
          <td class="body" >
            <p class="thin">
              <asp:Label ID="ModuleNameLabel" Runat="server" Text="<b>Shadow Beta Server</b>"></asp:Label><br/>
              <asp:Label ID="VersionLabel" FONT-SIZE="8pt" Runat="server"></asp:Label><br/>
              <asp:Label ID="UserDisplayNameLabel" FONT-SIZE="8pt" Runat="server"></asp:Label><br/>
              <asp:Label ID="ResourcesLabel" FONT-SIZE="8pt" Runat="server"></asp:Label>
            </p>
          </td>
        </tr>
        <tr>
          <td class="menu" colspan="2">
            <table style="padding: 0; width: 100%;">
      <tr>
        <td>
          <script type="text/javascript" language="javascript">
             create_navigation_menus();
          </script>
        </td>
        <td align="right">
          <script type="text/javascript" language="javascript">
            create_help_menus();
          </script>
        </td>
      </tr>
    </table>
          </td>
        </tr>
      </table>          
      <!-- end create header tag -->
      </td>
    </tr>
    <tr>
      <td class="content">
        <form id="form" method="POST" runat="server">
          <table style="height: 100%; width: 100%;">
            <tr>
              <td><input type="hidden" name="build_date" value="@BUILD_DATE@"/></td>
            </tr>
            <tr>
              <td>
                <asp:Panel id="normal" runat="server" CssClass="printable">
                   <!-- main -->
                   <asp:contentplaceholder id="main" runat="server" />
                </asp:Panel>
              </td>
            </tr>
          </table>  
        </form>    
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>  
    <tr>
      <td>
        <!-- footer -->
        <table class="footer">
          <tr>
	        <td>
		      <asp:Label ID="CopyrightLabel" runat="server" ></asp:Label>
	        </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

I searched this forum, but couldn't find anything helpful. Any help would be greatly appreciated. If any other info is needed, please let me know.

[Ruth]

Hi,

What browsers show this problem? I tried IE6 and I'm not seeing the issue.

Ruth

[Craigskelton]

It's IE 6. You need something in the page that has a width greater than the current screen for the problem to appear.

I just tried it in FireFox, which we don't actually support, and it worked fine.

[Ruth]

Hi,

Yes, I put a spacer set at 2000px wide in the table. Since I am not seeing the issue, I will post this to Milonic. I, of course, am using your code and just making a page, so my environment is not really yours, at least I wouldn't think it is.

Ruth

[Ruth]

Oops, I forgot to tell you to remove the top and left positioning from the main menus since you are using them as position='relative'; I don't know that this has anything to do with it, but the menu doesn't do a position relative and the accept being set with top and left parameters from that relative position. It probably isn't doing anything but I don't trust any browsers not to try to do something

Ruth