Solved

Why is my ASP.net navigation menu rendering different after publishing.

Posted on 2012-04-05
17
7,318 Views
Last Modified: 2012-04-06
I am using Visual Web Developer 2010 with the ASP.net Web template that comes with it. It has a navigation menu that I have modified and added to. It looks good in development but publishing in IIS 5.1 it loses the boxes containing the link text. I have used framework 4.0 for development and IIS 5.1.

I am sure the probles is around here,

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}


<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" Enabled="true">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/View.aspx" Text="View"/>
                        <asp:MenuItem NavigateUrl="~/Log.aspx" Text="Log"/>
                        <asp:MenuItem NavigateUrl="~/Status.aspx" Text="Status"/>
                        <asp:MenuItem NavigateUrl="~/Modify.aspx" Text="Modify"/>
                        <asp:MenuItem NavigateUrl="~/New.aspx" Text="New"/>
                        <asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin"/>
                    </Items>
                </asp:Menu>


Menu
0
Comment
Question by:dearness
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 4
  • 2
17 Comments
 

Author Comment

by:dearness
ID: 37814867
Im am using internet explorer 8.0
0
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 37816372
Are you sure the appropriate CSS is being deployed?  Does everything else render okay?
0
 
LVL 16

Expert Comment

by:Vikram Singh Saini
ID: 37816501
I suppose that there is no problem with css.

But you need to make sure that while deploying website on IIS 5.1 have you set Framework to 4.0 for that website or virtual directory in particular?

Because asp:menu are rendered as table while asp.net framework is set to 2.0 and in div if set to 4.0. So recheck your rendered source code for menu. I'm sure it would be in displaying menu in table format.

And this is the reason why css can't be applied as that is set for div not for tables.

So. What to do? Share with us your rendered source code. We need to tweak css for table (case .net 2.0) or just set framework to 4.0.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dearness
ID: 37817147
Thank you for your replies.
Paulmacd,
I made some changes to the CSS in web developer and when I press F12 in the IIS runtime browser I see the changes made to the CSS, for example changed background to black as below, but the menu never changes. I can change the <h1> attribute in CSS and my heading does change. I would say the correct CSS is being applied but not working with menu.

div.menu ul li a, div.menu ul li a:visited
{
    background-color: black;

CSS changed F12
vs00saini,
I have verified v4.0.30319 in IIS default website, virtual and development.

Is this the code you are asking for?
CSS..............
/* TAB MENU  
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}


HTML...............
<div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" Enabled="true">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/View.aspx" Text="View"/>
                        <asp:MenuItem NavigateUrl="~/Log.aspx" Text="Log"/>
                        <asp:MenuItem NavigateUrl="~/Status.aspx" Text="Status"/>
                        <asp:MenuItem NavigateUrl="~/Modify.aspx" Text="Modify"/>
                        <asp:MenuItem NavigateUrl="~/New.aspx" Text="New"/>
                        <asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin"/>
                    </Items>
                </asp:Menu>
            </div>
0
 

Author Comment

by:dearness
ID: 37817149
By the way the menu HTML is in a Master page.
0
 

Author Comment

by:dearness
ID: 37817163
I think this is the code you are asking for, navigation shows as a table.

Rendered Code?
0
 

Author Comment

by:dearness
ID: 37817219
version 4.0 in virtual
0
 
LVL 16

Expert Comment

by:Vikram Singh Saini
ID: 37817243
ok! Share the html source code, from the browser.
0
 

Author Comment

by:dearness
ID: 37817277
vs00saini,
Im a bit out of my depth with this, hope I am giving you the right information.

See modified attachement, PM Source Code.
PM-Web.txt
PM-Source-Code.htm
0
 
LVL 34

Assisted Solution

by:Paul MacDonald
Paul MacDonald earned 100 total points
ID: 37817548
And the Master Page references the CSS?
0
 

Author Comment

by:dearness
ID: 37817563
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

I trying to copy this example for framework 4.0 but still no luck,
http://msdn.microsoft.com/en-us/library/ms366731.aspx
0
 

Author Comment

by:dearness
ID: 37817599
if I remove this line from the master page,
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

I lose all formatting so it must be working correctly?
0
 

Author Comment

by:dearness
ID: 37817659
I just created a new website with Visual Web Developer with all default settings and still the menu does not format once published. Works Ok in development.

 Default New Website
0
 
LVL 16

Accepted Solution

by:
Vikram Singh Saini earned 400 total points
ID: 37818038
Hello dearness,

After reading all your rendered source code, I think I have got point.

Since as you mentioned that you have set website's asp.net version to 4.0 but still it is showing problem.

Reason:

In your web.config if the following line is present:
<pages controlRenderingCompatibilityVersion="3.5" /> then the Menu control uses HTML table elements as shown in comment id 37817163.

Solution?

1. In your web.config change the above line to:
<pages controlRenderingCompatibilityVersion="4.0" /> then the Menu control uses HTML listitem elements by default.

2.
If you don't want to modify above line in web.config, modify menu control in .aspx as:
<asp:Menu RenderingMode="List" />

Now after modifying files your menu and css would work fine. And source code would show menu as ul and li.
0
 

Author Comment

by:dearness
ID: 37818085
vs00saini,
<pages controlRenderingCompatibilityVersion="3.5" /> does not appear in my web.config,
but <asp:Menu RenderingMode="List" /> certainly fixed the problem.
Thank you very much, I have spent hours on this and its so frustrating to have one small keyword fix the problem. Learnt alot.
0
 
LVL 16

Expert Comment

by:Vikram Singh Saini
ID: 37818087
<pages controlRenderingCompatibilityVersion="3.5" /> does not appear in my web.config,

Then I assume that you have set asp.net 4.0 framework for your website but either it has not been set for the very same virtual directory. Recheck it and if you say that it is set, then my next suggestion is to reset iis using iisreset command in cmd prompt.

I think that will make IIS to make changes to its website and virtual directory to be updated in meta file.
0
 

Author Comment

by:dearness
ID: 37818259
great information. I am not at the application PC now but will have look tomorrow.
Thanks.
0

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…
Suggested Courses

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question