Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Jumbled Menu

8 Answers 115 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Wendy Hunt
Top achievements
Rank 2
Wendy Hunt asked on 11 Jan 2010, 08:51 PM
jumbledmenu.JPG
I'm having an issue with my menu.  To debug the issue, ...  I have removed it and recompiled; added a generic one in by hand and recompiled; and added my original back in and recompiled.  All of which have not given me my menu back in working order.  Adding a generic one in by hand was just as hosed as my current one.  I left on Friday and it was fine, come in on Monday and it was hosed. 
Here is my aspx code:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" Inherits="PRSAdminTelerik.Pages.Master" %> 
<!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 runat="server">  
    <title>PRS Administration</title> 
        <link href="../Includes/Default.css" type="text/css" rel="stylesheet" /> 
        <script language="javascript" src="../Includes/Default.js" type="text/javascript"></script>   
    <asp:ContentPlaceHolder ID="head" runat="server">  
    </asp:ContentPlaceHolder> 
</head> 
<body> 
  <form id="form1" runat="server">  
  <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 
  <img style="LEFT: 0px;POSITION: absolute; TOP: 0px" height="79" alt="" 
            src="..\images\hoover.jpg"/>  
    <div style="position:absolute;left:304px; top: 26px; height: 18px; width: 200px;">  
      <asp:Label ID="userLabel" runat="server" Text="Label" CssClass="TextReadOnly"></asp:Label> 
    </div> 
    <div> 
    <asp:Label ID="Label1" runat="server" Text="PRS Administration" 
      style="position:absolute;left:69px; top:18px; font-size:larger"></asp:Label> 
    <asp:Label ID="environmentLabel" runat="server"   
      style="LEFT:536px; POSITION: absolute; TOP:22px" Text="" CssClass="PageWarning"></asp:Label> 
    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://ww2t.wapa.gov/sites/western/prshelp/Pages/default.aspx" 
      style="z-index:1;  position:absolute; top:26px; left:830px;">PRS Help</asp:HyperLink> 
    </div> 
      
      
    <div style="position:absolute; top:70; left:76; width:1000px; ">  
    <telerik:RadMenu ID="RadMenu1" runat="server"    
      style="z-index:1;  position:absolute; top: 53px; left: 59px;">  
    <Items> 
      <telerik:RadMenuItem Text="Home" runat="server" NavigateUrl="Default.aspx"></telerik:RadMenuItem> 
      <telerik:RadMenuItem Text="Accounts" runat="server">  
        <Items> 
          <telerik:RadMenuItem Text="Administer" runat="server" NavigateUrl="PlantAccountAdministration.aspx"></telerik:RadMenuItem> 
        </Items>                  
      </telerik:RadMenuItem> 
      <telerik:RadMenuItem Text="Construction Cost Trend" runat="server" > 
        <Items> 
          <telerik:RadMenuItem Text="Multiplier Update" runat="server" NavigateUrl="CostConstructionMultiplier.aspx"></telerik:RadMenuItem> 
        </Items>   
      </telerik:RadMenuItem> 
      <telerik:RadMenuItem Text="Interest Rates" runat="server">  
        <Items> 
          <telerik:RadMenuItem Text="Current" runat="server" NavigateUrl="InterestRatesCurrent.aspx"></telerik:RadMenuItem> 
        </Items> 
      </telerik:RadMenuItem> 
      <telerik:RadMenuItem Text="Power System" runat="server" NavigateUrl="PowerSystemAdministration.aspx"></telerik:RadMenuItem> 
      <telerik:RadMenuItem Text="Study" runat="server">  
        <Items> 
          <telerik:RadMenuItem Text="Administer" runat="server" NavigateUrl="StudyAdministration.aspx"></telerik:RadMenuItem> 
        </Items> 
      </telerik:RadMenuItem> 
      <telerik:RadMenuItem Text="Reports" runat="server" NavigateUrl="ReportAdministration.aspx"></telerik:RadMenuItem> 
      <telerik:RadMenuItem Text="Templates" runat="server">  
        <Items> 
          <telerik:RadMenuItem Text="Administer" runat="server" NavigateUrl="TemplateAdministration.aspx"></telerik:RadMenuItem> 
          <telerik:RadMenuItem Text="Master" runat="server" NavigateUrl="TemplateMaster.aspx"></telerik:RadMenuItem> 
        </Items> 
      </telerik:RadMenuItem> 
      <telerik:RadMenuItem Text="Users" runat="server">  
        <Items> 
          <telerik:RadMenuItem Text="Administer" runat="server" NavigateUrl="Default.aspx"></telerik:RadMenuItem> 
        </Items> 
      </telerik:RadMenuItem> 
    </Items> 
  </telerik:RadMenu> 
    </div> 
    <div> 
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
      
        
      
    </asp:ContentPlaceHolder> 
  </div> 
</form> 
</body> 
</html> 
 

The only behind code is this:
      if (!this.IsPostBack)  
      {  
        RadMenuItem item = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery);  
        if (item != null)  
        {  
          item.HighlightPath();  
        }  
      } 

I've attached a pic to show you.

Should I be opening up a support ticket?

Thanks!
wen



8 Answers, 1 is accepted

Sort by
0
Schlurk
Top achievements
Rank 2
answered on 12 Jan 2010, 04:40 PM
Is there any outside-related CSS that you might be applying to your RadMenu? Since you are experiencing the same issue with a default ASP.NET menu it leads me to believe that something might  be over-riding the CSS of both of these controls. I tested your markup on my machine and everything worked fine, so there seems to be an outside source at work here.
0
Wendy Hunt
Top achievements
Rank 2
answered on 13 Jan 2010, 03:45 PM
I couldn't find anything in my CSS that would cause this to happen.  I also haven't been working in my CSS files since the beginning of the project and my menu issue is new. 

Here is my css:
body  
{  
    background: white;  /* light yellow #fcfcef; */ 
    margin: 0px;  
    text-align: left;  
}  
 
a:link, a:active, a:visited, hover  
{   
    color: #36c;   
    font-size:14px;  
    text-decoration: underline;   
    font-family:Arial;  
}  
 
span  
{  
    color:Black;  
    font-size:14px;  
    font-family:Arial;  
}  
 
label  
{  
    color:Black;  
    font-size:12px;  
    font-family:Arial;  
}  
 
/* Classes */ 
 
.ComboBox  
{  
    color:black;  
    font-size:9pt;  
}  
 
.ButtonPrimary   
{  
    background-color: #c00;   
    color: #fff;  
    font-weight: bold;  
    border-top: 1px solid #f00;  
    border-right: 1px solid #900;  
    border-bottom: 1px solid #900;  
    border-left: 1px solid #f00;  
    cursor: hand;  
}  
 
.ButtonSecondary   
{  
    background-color: #ddd;   
    color: #000;  
    font-weight: bold;  
    border-top: 1px solid #fff;  
    border-right: 1px solid #666;  
    border-bottom: 1px solid #666;  
    border-left: 1px solid #fff;  
    cursor: hand;  
}  
 
.PageCaption  
{  
    color:Black;  
    font-size:20px;  
    font-family:Arial;  
}  
 
.PageWarning  
{  
    color:Red;  
    font-size:20px;  
    font-family:Arial;  
}  
 
.PageDescription  
{  
    color:Black;  
    font-size:16px;  
    font-family:Arial;  
}  
 
.CaptionPrimary   
{  
    color:Black;  
    font-size:16px;  
    font-family:Arial;  
    font-weight:bold   
}  
 
.CaptionSecondary  
{  
    color:Black;  
    font-size:12px;  
    font-family:Arial;  
    font-weight:bold;  
}  
 
.CaptionReadOnly  
{  
    color:Gray;  
    font-size:14px;  
    font-weight:bold;  
}  
 
.TextReadOnly  
{  
    color: #666;  
    font-family:Arial;  
    font-size:14px;  
}  
 
.PanelBordered  
{  
    border-top: 1px solid #ccc;  
    border-right: 1px solid #ccc;  
    border-bottom: 1px solid #ccc;  
    border-left: 1px solid #ccc;  
}  
 
/* Sets general style for data grid */ 
.grid  
{   
    font-size: 12px;  
    font-family:Arial;  
    background-color: Transparent;  
}  
 
/* Sets general style for data grid, with a hand cursor */ 
.grid-row-select  
{   
    font-size: 12px;  
    font-family:Arial;  
    background-color: Transparent;  
    cursor:hand;  
}  
 
/* Sets general style for data grid */ 
.grid-bordered  
{   
    font-size: 12px;  
    font-family:Arial;  
    border-style:solid;  
    border-color:Gray;  
    border-width:thin;  
    background-color: Transparent;  
    overflow:auto;  
}  
 
/* Sets style for grid cell borders */ 
.grid tr td  
{   
    font-size: 12px;  
    font-family:Arial;  
    font-style: normal;  
    border-color: #C2B083;  
    border-bottom-width: 0px;  
    border-left-width: 1px;  
    border-right-width: 0px;  
    border-style: solid;  
    border-top-width: 0px;  
    padding-right: 10px;  
}  
/* Sets general style for data grid */ 
.grid-row-selected  
{   
    background: #FFFFCC;  
    font-size: 14px;  
}  
/* Sets style for grid header row */ 
.grid-header-row  
{   
    background-color: #EEEECC;  
    text-align: left;  
    color: Black;  
    font-weight: bold;  
}  
 
a.grid-header-row:link,a.grid-header-row:visited,a.grid-header-row:active  
{  
    font-size: 10pt;  
    font-style: normal;  
    font-weight: bold;  
    text-decoration: none;  
    whitewhite-space: nowrap;  
    color: Black;  
}  
a.grid-header-row:hover  
{  
    font-size: 10pt;  
    font-style: normal;  
    font-weight: bold;  
    text-decoration: underline;  
    whitewhite-space: nowrap;  
}  
 
.grid-row   
{   
    background-color: Transparent;  
    font-size:14px;  
}  
 
/* Sets style for alternative grid row detail */ 
.grid-row-alt  
{   
    background-color: #DDDDDD;  
    font-size:14px;  
}  
 
.grid-header-row a, a:active, a:visited, hover  
{  
    font-size:14px;  
    font-weight:normal;  
}    
 

Thanks.
wen



0
Jose
Top achievements
Rank 2
answered on 13 Jan 2010, 07:28 PM
Hi Wen.

You should know that CSS used by the controls are normaly based on relative positioning, so perhaps you should start the tracing of the problem by removing the "position:absolute" and "z-index:1" settings of your styles in the div and menu.

It should look like this:

<div style="top:70; left:76; width:1000px; ">     
    <telerik:RadMenu ID="RadMenu1" runat="server"       
      style="top: 53px; left: 59px;">   
 

Check what happens and let us know.

Cheers.
Jose Guay
0
Wendy Hunt
Top achievements
Rank 2
answered on 13 Jan 2010, 07:58 PM
Good Idea, but I tried that (removing the zindex and positioning) and to no avail.  You would think it might be affected...  Let me know if you think of anything else. 

Thanks!
wen
0
Jose
Top achievements
Rank 2
answered on 13 Jan 2010, 08:27 PM
Have you seen this behavior in Firefox or IE8?

Jose
0
Wendy Hunt
Top achievements
Rank 2
answered on 13 Jan 2010, 10:24 PM
Hi Jose -

I have to use IE7 for this project, because it is federal wide.  We haven't moved to beta 8 and don't support FireFox, unfortunately.

wen
0
Accepted
Kamen Bundev
Telerik team
answered on 14 Jan 2010, 04:38 PM
Hi Wendy,

The problem lies on line 48 in your Default.css where you have a global style for all spans to have position: absolute. Removing it should fix your RadMenu. Let me know how it goes.

Greetings,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Wendy Hunt
Top achievements
Rank 2
answered on 14 Jan 2010, 04:46 PM
Thanks Kamen!!!

wen
Tags
Menu
Asked by
Wendy Hunt
Top achievements
Rank 2
Answers by
Schlurk
Top achievements
Rank 2
Wendy Hunt
Top achievements
Rank 2
Jose
Top achievements
Rank 2
Kamen Bundev
Telerik team
Share this question
or