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? Please help. Thanks.

Answer 1

Hi @arunabhdas

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!