Custom Menu control - Inline CSS problem RRS feed

  • Question

  • User-1483090086 posted
    I've been working on a CSS based menu using the MenuAdapter to override the rendering of the Menu control to ensure that it produces valid HTML. So far the HTML that is sent to the client is correct but when I use runat="server" in the head tag of my page there is some additional inline CSS being rendered in the head section. How do I prevent this from being rendered? Below is an example of the output. The section I'm trying to get rid of is marked in red.
    <style type="text/css">
    .ctl00_MainMenu_0 { background-color:white;visibility:hidden;display:none;;left:0px;top:0px; }
    .ctl00_MainMenu_1 { text-decoration:none; }
    .ctl00_MainMenu_2 { }



    <div id="MainMenu">
    <ul class="Menu-Root">
    <li class="Menu-Leaf"><a href="/Default.aspx" class="Menu-Link Link-Selected"><span>Home</span></a></li>
    <li class="Menu-Leaf"><a href="/About.aspx" class="Menu-Link"><span>About</span></a></li>
    <li class="Menu-Leaf"><a href="/Contact.aspx" class="Menu-Link"><span>Contact</span></a></li>
    As you can see the .ctl00_MainMenu_* classes are unused and should therefore be removed.

    TIA / Kristoffer
    Monday, July 10, 2006 3:35 AM

All replies

  • User-534056067 posted

    Thanks for bring this up, Kristoffer.  Wilco Bauwer also noted this problem (in private email to me).  So, it is already on my to-do list.  Unfortunately, these unwanted/unneeded styles aren't easy to get rid of.  They are being gen'ed deep within the framework and are hard to twart.  Still, I'm annoyed by their presence, too, so I'll keep trying to figure out how we might get rid of them when the adapters are in play. Hopefully, I'll figure this out soon!

    PS  These styles are used when the control is in its unadapted state.  I believe they are gen'ed by the control when it is in its Init phase.  Since the adapters only kick in during the render phase the unwanted styles are a little hard to purge.

    Monday, July 10, 2006 3:27 PM
  • User-1044145784 posted

    It appears the Menu control is calling Page.Header.Stylesheet.CreateStyleRule() inside of it's OnPreRender() method overload.

    The MenuAdapter has an overideable method for OnPreRender, but if you do override it and forget to (or intentionally leave out) call base.OnPreRender, the menu is NOT rendered at all.

    My guess is that because a supertype (BaseDataBoundControl?) is calling DataBind() on the control to get it to populate the menu items.

    You could "fake" this behavior with the following overload in your MenuAdapter derived class.


    protected override void OnPreRender(EventArgs e)
        // Do not call the base class implementation.
        // base.OnPreRender(e);


    This will skip registering the stylesheet declarations, but it might also have other effects.  I'm not sure what else is going on in the Menu.OnPreRender overload.



    Tuesday, July 18, 2006 9:51 AM
  • User-1044145784 posted

    This will skip registering the stylesheet declarations, but it might also have other effects.  I'm not sure what else is going on in the Menu.OnPreRender overload.

    I meant to add that it also registers client side script in addition to stylesheet declarations in the OnPreRender method of the Menu server control.

    If you are registering your own styles and scripts, this might not be a problem.

    The one caveat I've noticed is that you have to call DataBind on the Control reference (as shown above) or the menu items are never rendered.


    Tuesday, July 18, 2006 10:14 AM
  • User-534056067 posted
    I'm going to ping some of the folks on the team to see if we can figure out how to override OnPreRender safely.  I think this line of investigation (i.e., eliminating the unwanted styles by taking over OnPreRender from the adapter) is a fruitful path forward.  Nice work, FogJuice.
    Tuesday, July 18, 2006 11:55 AM
  • User-1483090086 posted
    Thanks for posting guys! Any news on the subject Russ?

    All the best // Kristoffer

    Tuesday, August 1, 2006 4:04 PM
  • User-534056067 posted

    I had a lively email discussion within the team.  Program Managers, Architects and Devs chipped in.  Betrand Le Roy dug through all the code and determined that the Menu case it appears that you can get away with the proposed solution (above).  However, the same simple solution is probably not viable for all controls (e.g., TreeView, etc.) since the prerender processing is control specific and may be more involved in some of those other cases.

    So, you might ask, what should we do? Personally, I think this is one of those times when it is better to err on the side of caution. I think it's important that we balance what we are trying to gain (the elimination of a relatively small number of useless styles embedded in the HEAD) with what we stand to lose (stability, maybe).

    Tuesday, August 1, 2006 4:37 PM
  • User1598028445 posted

    I've been trying to resolve this same issue on a menu control that I'm creating.  I'm using the adaper as a base for an override of the menu control (I need additional functionality).  One thing that you didn't seem to note is that the base menu control is also outputting an external javascript reference and inline script calls at the bottom of the page.  Although the inline styles aren't that big of a deal, the external script reference is causing an unnessesary HTTP request.  I've tested your method, and found that it removes those additional javascript references.

    Friday, August 1, 2008 11:07 AM
  • User-1203307029 posted

    Looks like I'm a little late in on the conversation but I have this problem, and there is very little info out there on it, I presume because most people just live with the styles and overwrite them where necessary.

     My issue is that I have an existing product, and I am trying to add more than one ajax control to a page, which requires that the <head> tag have a runat="server".  Since this has never been the case in the history of the product, adding the runat allows the style info from the menu control to be added, thus the style of the menu changes.  The nice solution would be to turn off whatever is adding that style info to the head and be done with it, however I am not using a menu adapter so I can't use the fix provided above.  Anyone figured out anything more on this?

     The other solution I suppose is to try and counteract the styles in the stylesheet so that the look is the same as it is currently, but UI and css are expensive in a place that focuses more on the application dev than the look and feel.

    Wednesday, April 1, 2009 3:01 PM
  • User1668635887 posted

    I had a problem with the menu control writing font-size: 1em as an inline style so I did this as a workaround to strip it out:

    protected override void Render(HtmlTextWriter writer)
                HtmlTextWriter output = new HtmlTextWriter(new StringWriter());
                string outputString = output.InnerWriter.ToString();
                //strip out all of the inline styles that the asp menu adds
                outputString = Regex.Replace(outputString, "style=\"*\"", string.Empty);

    Hope that helps...

    Thursday, April 15, 2010 10:25 AM
  • User1668635887 posted

    Sorry, I made a mistake in the reg expression. Should be:

    outputString = Regex.Replace(outputString, "style=\"(.|\\n)*?\"", string.Empty);

    Thursday, April 15, 2010 10:38 AM