styling ASP.NET menu controls with standard css

Question

I have a piece of piece of HTML which looks like this -

<div id="moduleList">
<ul>
    <li class="noBorder">&nbsp;</li>
                    <li class="noBorder">
        <span class="currentTabLeft">&nbsp;</span><span class="currentTab">
            <a href="Welcome.aspx"
                id="grouptab_0">Home</a>
        </span><span class="currentTabRight">&nbsp;</span>

                </li>
                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Locations.aspx">Locations</a>
        </span><span class="notCurrentTabRight">&nbsp;

    </span>
        </li>
                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">

        <a href="Users.aspx" 
            id="grouptab_2">Users</a>
        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>
                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Reports.aspx" 
            id="grouptab_3">Reports</a>
        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>

                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Alerts.aspx" 
            id="grouptab_4">Alerts</a>
        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>
             <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Preferences.aspx" 
            id="grouptab_5">Preferences</a>

        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>

    </ul>

</div>

And the stylesheet that goes along with that looks somewhat like this -

    #moduleList {
        background-image:url(images/tabRowGrayBg.gif);
        background-repeat:repeat-x;
        border-bottom-color:#565656
    }
    #moduleList>ul>li {
        background-image:url(images/otherTabGray.gif)
    }
    #moduleList ul li span.currentTab a:link, #moduleList ul li span.currentTab a:visited, #moduleList ul li span.currentTab a:hover {
        color:#ffffff
    }
    #moduleList ul li a:link, #moduleList ul li a:visited {
        color:#444444
    }
    #moduleList ul li a:hover {
        color:#000000
    }
    #moduleList ul li span.currentTabLeft, #moduleList ul li span.currentTabRight, #moduleList ul li span.currentTab {
        background-image:url(images/currentTabGray.gif);
        background-repeat:no-repeat;
        border-bottom-color:#8e8e8e
    }

Now, I wrote the following code in an .aspx file to replicate the tabbing functionality that the above code produces -

     <div id="moduleList">
                <!-- start of content for ContentContainer -->

                            <asp:Menu CssClass="TabMenu" DataSourceID="TabMenuSitemap"
                             HideSelectElements="True"
                 ID="Menu2" Orientation="Horizontal" runat="server">
                  <StaticSelectedStyle CssClass="TabMenuItemSelected" />
                   <StaticMenuItemStyle CssClass="TabMenuItem" />
                              <StaticMenuStyle CssClass="SiteStaticMenu" />
                              <StaticHoverStyle CssClass="TabMenuItemHover" />
                              <DataBindings>
                                <asp:MenuItemBinding DataMember="SiteMapNode" Depth="0"
                NavigateUrlField="Url" TextField="Title"
                ToolTipField="Description" />
                              </DataBindings>
                            </asp:Menu>
    </div>

And I made sure to wrap it in a div called moduleList. Now, unfortunately, the HTML that the above .aspx generates looks nothing like I was hoping for. It generates something using nested tables that looks like this -

    <div id="moduleList">

                            <a href="#ctl00_AjaxLoginView1_Menu2_SkipLink"><img alt="Skip Navigation Links" src="/eservice/WebResource.axd?d=HWE7J2PUlnLya8lWJlEVZw2&amp;t=634129453271895014" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_AjaxLoginView1_Menu2" class="TabMenu SiteStaticMenu ctl00_AjaxLoginView1_Menu2_5 ctl00_AjaxLoginView1_Menu2_2" HideSelectElements="True" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage1" id="ctl00_AjaxLoginView1_Menu2n0"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage1.aspx" style="border-style:none;font-size:1em;">TabPage1</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage2" id="ctl00_AjaxLoginView1_Menu2n1"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4 TabMenuItemSelected ctl00_AjaxLoginView1_Menu2_7" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>

                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3 TabMenuItemSelected ctl00_AjaxLoginView1_Menu2_6" href="/eservice/TabPage2.aspx" style="border-style:none;font-size:1em;">TabPage2</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage3" id="ctl00_AjaxLoginView1_Menu2n2"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage3.aspx" style="border-style:none;font-size:1em;">TabPage3</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage4" id="ctl00_AjaxLoginView1_Menu2n3"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>

                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage4.aspx" style="border-style:none;font-size:1em;">TabPage4</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage5" id="ctl00_AjaxLoginView1_Menu2n4"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage5.aspx" style="border-style:none;font-size:1em;">TabPage5</a></td>
                </tr>
            </table></td>
        </tr>

    </table><a id="ctl00_AjaxLoginView1_Menu2_SkipLink"></a>

                      <div id="SiteContent">

                      </div>

                      <div class="SiteContentSpacer">
                      </div>

                </div>

Is there a way to force the asp:Menu control to spit out ul and li instead of tables, so that I can use my existing CSS styles to style them correctly or is that a lost cause? Has anyone else experienced a similar problem?

Marko · Accepted Answer · 2010-07-11 23:07:58Z

4

What you're looking for is called CSS Friendly Adapters.

It's an adapter which makes a few of the controls output proper HTML structure, divs, uls and so forth.

Have fun!

answered Jul 11, 2010 at 23:07

Marko

72.3k29 gold badges126 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

styling ASP.NET menu controls with standard css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related