Tech Off Thread

4 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

CSS Style Question

Back to Forum: Tech Off
  • User profile image
    ManipUni

    I'm using an ASP Menu on a Master page. It works great.

     

    All I want to do is remove the underline on the selected page. However since ASP Menu items do not have a style element the only way to do it was a hack namely - item.text = "<font>" + item.text + "</font>";

     

    Which produces ugly HTML like this:

    <td style="white-space:nowrap;"><a class="ctl00_NavigationMenu_1 ctl00_NavigationMenu_3" disabled="true"><font>about us</font></a></td>

     

    I should note that ASP Menu gives you zero access to any CSS which it dynamically generates at runtime.

     

    <font></font> works in Chrome but not Firefox or Internet Explorer.

    <div class="disableditem"></div> works in IE and Firefox, but for some ungodly reason Chrome puts the item on its own line (even with enough space remaining to the right).

     

    This is a giant mess and my CSS sucks (I hate HTML and CSS, - worst design ever). Any suggestions other than ripping out the silly ASP Menu and doing it by hand?

     

    PS - Even with <div class="disableditem"> in place I cannot modify the style of the item in CSS using ".disableditem {}" for some reason.

  • User profile image
    ZippyV

    I have no idea what the full html is that asp:menu generates. Is there no property like CssClass that you can use?

     

    Try this:

    .disableditem a {text-decoration: none;}

  • User profile image
    Sven Groot

    <div> is a block element which probably explain's Chrome's behaviour. Use <span> instead.

     

    Can't you use a control adapter to modify the menu's rendering? I'm not sure because I don't normally use the ASP.NET WebControls.

  • User profile image
    DavidBarrett

    I have not looked at this particular issue but the way I would go about it would be to inspect the HTML with something like firebug/ie dev toolbar work out what class is currently applied to it and then override it in CSS, so if its :

    <td style="white-space:nowrap;"><a class="ctl00_NavigationMenu_1 ctl00_NavigationMenu_3" disabled="true"><font>about us</font></a></td> 

     

    you could add into your CSS:

    .ctl00_NavigationMenu_1 ctl00_NavigationMenu_3

    {

            text-decoration:none !important;

    }

     

    Let me know how you get on.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.