CSSFriendly alternative for Asp.net 4.5

Question

1.00/5 (1 vote)

See more:

Hi,
I have recently upgraded our application from 2.0 to 4.5 as a result of which we have upgraded the servers, Ajaxtoolkit etc. Recently we were told to incorporate out application to use IE11. Now the issue we are facing is that the application runs on IE 11 only if added to the comaptibility View list which is not recommended. The application uses the CSSFriendlyAdapter.browser file in which it has a

adapterType="CSSFriendly.MenuAdapter

. On commenting out this the site works properly but the Menu control on top gets kind of distorted.
Below is my Menu control

XML

<div id="navigation">
                <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSourceCVP"
                    OnDataBound="Menu1_DataBound" Orientation="Horizontal" OnDataBinding="Menu1_DataBinding"
                    MaximumDynamicDisplayLevels="0" OnMenuItemDataBound="Menu1_MenuItemDataBound"
                    OnMenuItemClick="Menu1_MenuItemClick" >
                    <DataBindings>
                        <asp:MenuItemBinding DataMember="SiteMapNode" TextField="Title"
                            ToolTipField="Description" ValueField="ResourceKey"/>
                    </DataBindings>
                    <StaticSelectedStyle CssClass="selected" />
                </asp:Menu>
                <uc1:ActiveUser ID="ActiveUser1" runat="server"></uc1:ActiveUser>
            </div>

and the css related to it.

CSS

div#navigation
{
    display : block;
    background-position: top right;
    background-repeat: no-repeat;
    clear: both;
    width: 100%;
    height: 33px;
    margin: 0px;
    padding: 0px;
    float: none;
}

div#navigation div.User
{
    display:block ;
    float:right;
    color:white;
}

div#navigation div.AspNet-Menu-Horizontal
{
    display:inline-block ;
    margin: 0px;
    padding: 0px;
    width :auto;
    float:none;
    float:left;
    font-size: 1.15em;
}

ul.AspNet-Menu
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color:Maroon ;
}

My question is that since i have commented out the adapter part of it in the browser file how do i add this same CSS to the Menu control without using the adapter?
Please help me out here!
Thanks in advance :)

Posted 26-Aug-15 1:42am

Karan Chhabria

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2015-08-26T03:18:00

Solution 1

When you upgraded the site, Visual Studio most likely set the controlRenderingCompatibilityVersion property[^] in the web.config file to "3.5". As a result, the Menu control will render using a <table> element with inline styles.

To fix this, you can either remove the controlRenderingCompatibilityVersion setting from the <pages> element in your web.config file, or you can set the RenderingMode property[^] on the Menu control to List:

ASP.NET

<asp:Menu ID="Menu1" runat="server" RenderingMode="List" ...

Posted 26-Aug-15 3:18am

Richard Deeming

Comments

Karan Chhabria 27-Aug-15 0:46am

Hi Richard,
Thank you for your reply. I tried this but the Menu is still rendering vertically instead of horizontally.
Plus after i remove the reference of the adapter from the browser file how am i supposed to apply the same CSS to the control? I am asking this since the current CSS (with the reference to the adapter in the browser file) has 'div#navigation div.AspNet-Menu-Horizontal' and after taking out the reference how do i apply the same to the MENU control?
I am new to the whole CSSFriendly/MENU control idea, please forgive me for shooting such questions! :)

Richard Deeming 27-Aug-15 7:39am

Add a <div class="AspNet-Menu-Horizontal">...</div> around the menu control, inside the <div id="navigation">...</div> tag. You might also need to set the menu control's CssClass to "AspNet-Menu".

Karan Chhabria 28-Aug-15 6:10am

Surprisingly, after adding the 'controlRenderingCompatibilityVersion' tag in the config the menu rendered horizontally as expected. But the issue now is that the menu are just plain links on top of the page. I had added the <div> tags in the master page as you suggested but that did not work. There is more to the CSS posted above for example, we have ,
li.AspNet-Menu-Leaf
{
padding-top : 6px;
color : Yellow;
}

span.AspNet-Menu-NonLink
{
color: Fuchsia ;
width:1px;
height:4px;
display : none ;
overflow :hidden;
visibility : hidden;
font-size : 1px;
}

a.AspNet-Menu-Link:Link, a.AspNet-Menu-Link:Visited
{
float:left; /* For IE 6 */
color: Gray;
border-right:2px solid black;
#border-right: 2px groove #777777;
padding-left:0.4em;
padding-right:0.4em;
}

How am i supposed to set these properties to my Menu without using the adapter?

Richard Deeming 28-Aug-15 8:15am

Using CSS and Styles with the Menu Control[^]

If you can't get the control to work as you want, the source code for the old CSS-friendly adapters is available:
https://cssfriendly.codeplex.com/SourceControl/latest#CSSFriendly/MenuAdapter.cs[^]

Also, if you've added the controlRenderingCompatibilityVersion tag to the web.config file, check the rendered output of your page. You've probably forced the menu to render as a <table>.

Karan Chhabria 2-Sep-15 23:03pm

Hey Richard! this worked...Thanks a lot! i changed my Menu control along with the CSS classes and it is rendering exactly as expected. Now the only issue is that i cannot figure out how to hide the Non-Link Menu Item. Below is my updated Menu Control and CSS. How do i assign the 'span.AspNet-Menu-NonLink' CSS?

<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu11">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSourceCVP" StaticDisplayLevels="1"
OnDataBound="Menu1_DataBound" Orientation="Horizontal" OnDataBinding="Menu1_DataBinding"
MaximumDynamicDisplayLevels="0" OnMenuItemDataBound="Menu1_MenuItemDataBound"
OnMenuItemClick="Menu1_MenuItemClick" EnableViewState="True" CssClass="AspNet-Menu">
<databindings>
<asp:MenuItemBinding DataMember="SiteMapNode" TextField="Title" ToolTipField="Description"
ValueField="ResourceKey" />

<staticselectedstyle cssclass="selected">

</ul>
</div>

CSS :
ul.AspNet-Menu11
{
list-style-type: none;
margin: 1%;
margin-top:0px;
margin-left:0px;
padding: 1%;
border: 0px;
background-color:Maroon ;
}

li.AspNet-Menu-Leaf
{
padding-top : 6px;
color : Yellow;
}

span.AspNet-Menu-NonLink
{
color: Fuchsia ;
width:1px;
height:4px;
display : none ;
overflow :hidden;
visibility : hidden;
font-size : 1px;
}

.AspNet-Menu a:Link, .AspNet-Menu a:Visited
{
float:left; /* For IE 6 */
color: Gray;
border-right:2px solid black;
#border-right: 2px groove #777777;
padding-left:0.4em;
padding-right:0.4em;
}

.selected a:Link, .selected a:Visited
{
color: White ;
}

Richard Deeming 3-Sep-15 8:18am

I'm not sure there's any way to do that. The menu control seems to render every item as an <a> tag, and the CSS class doesn't seem to change between link and non-link items.

Karan Chhabria 3-Sep-15 13:15pm

oh :( if not CSS then is there some way i can detect the non link via c# code?

Richard Deeming 3-Sep-15 14:14pm

Not that I can see.

You might be able to work around it by using the attribute value selector[^] in your CSS:

.AspNet-Menu a[href="#"] { /* non-link styles here */ }

You'd have to check the rendered HTML to see how the non-link items are rendered.

Karan Chhabria 7-Sep-15 3:54am

Used the negation pseudo-class and it worked! :) added this to my CSS,
.AspNet-Menu a:not(:link)
{
}