Get rid of PageMenu style="float:left;"

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
4/27/2011 4:43:53 PM
Gravatar
Total Posts 73

Get rid of PageMenu style="float:left;"

I'm playing with the PageMenu in my layout.master and it seems to automatically generate an element style attribute hard-coded to set float:left.  At least, I've looked and I don't see how I could be the one setting it.

Is this just part of the control, and can it be turned off?

Ted

4/27/2011 7:44:09 PM
Gravatar
Total Posts 2239

Re: Get rid of PageMenu style="float:left;"

Hi,

See the paragraph starting with "There are 3 possible approaches..." in the "The Trouble With ASP.NET Menu" document. You'll want to follow the instructions for the 1st approach. Add UseNet35Mode="true" to the mojomenu control in the theme.skin.

HTH,
Joe d.

4/28/2011 8:36:55 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

Thanks for the suggestion.  I tried adding the UseNet35Mode parameter to no effect.  I'm not sure we're talking about the same control.  The document you reference talks about the mojoMenu control while mine is the PageMenu control used by Artisteer.  The float style is being applied to the art-vmenublock div which has the id ctl01_PageMenu1_ctl01.

Thinking it may be applied by Artisteer's own javascript, I checked the script.js file produced with the skin but couldn't find any reference to float there either.

Any other ideas?

4/28/2011 8:51:51 AM
Gravatar
Total Posts 2239

Re: Get rid of PageMenu style="float:left;"

What version of mojoPortal are you running?

PageMenu inherits properties from mojoMenu control in theme.skin. The UseNet35Mode was added very recently, I think v2.3.6.4.

The float: left; comes from .NET 4's rendering of the ASPMenu. Basically, before .NET 4 the menu was rendered as bunch of nested tables and the CSS Friendly Adapters had to be bolted on to get the menu to render as a UL. .NET 4 renders the menu as a UL but then adds in a bunch of unnecessary inline styles which break things. The UseNet35Mode forces the menu to function like it did before .NET 4, using the CSS Friendly Adapter, which doesn't include the inline styles.

If you are running an old version of mojoPortal and can't upgrade, you could use !important on the properties in your CSS to override the inline styles.

HTH,
Joe D.

4/28/2011 9:06:39 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

Thanks for the explanation Joe.

I'm running 2.3.6.5, just upgraded on Tuesday.

To make sure my usage was right, here's the line before:

<portal:PageMenu id="PageMenu1" runat="server" UseArtisteer="true" UseTreeView="false" IsSubMenu="true" TreeViewShowExpandCollapse="false"  />

and after:

<portal:PageMenu id="PageMenu1" runat="server" UseNet35Mode="true" UseArtisteer="true" UseTreeView="false" IsSubMenu="true" TreeViewShowExpandCollapse="false"  />

The float still appears in either case.

Using .art-vmenublock {float:none !important} works, so that's what I've done now, I just wanted to make sure I was using the cleanest available option.

4/28/2011 9:13:27 AM
Gravatar
Total Posts 2239

Re: Get rid of PageMenu style="float:left;"

Hi,

The UseNet35Mode needs to be on the MojoMenu control in the theme.skin file. It will not do anything on the PageMenu control.

Regardless of that, you are using TreeView so the .NET 4 problem shouldn't present itself. Can you give me a link to your site so I can take a closer look?

Thanks,
Joe D.

4/28/2011 9:19:21 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

Certainly.  It's go to www.diditbetter.com/products.aspx for an example.  I've removed the css override.

4/28/2011 9:20:50 AM
Gravatar
Total Posts 18439

Re: Get rid of PageMenu style="float:left;"

Hi Guys,

Myself I prefer the approach number 3 which is to use !important to override the float:left;

But I can shed light on why it is not working when he adds UseNet35Mode, it is because of using UseArtisteer="true" on the PageMenu, that is the old way we supported Artsiteer and it uses a different menu control than mojoMenu. In more recent versions we no longer use that setting because we have configuration properties on mojoMenu that allow it to render what is needed for Artisteer, so the older ArtisteerMenu is now deprecated but is still there for backward compatibility with existing skins.

If you look in recent version Artisteer skins you will see that we don't use the UseArtisteer attribute anymore on SiteMenu or PageMenu, instead we configure mojoMenu from theme.skin like this:

<portal:mojoMenu runat="server" SkinID="SiteMenu"
   RenderContainerCssClass="true"
   RenderImages="false"
   UseMenuTooltipForCustomCss="true"
   RenderCustomClassOnLi="true"
   RenderCustomClassOnAnchor="false"
   RenderLiSelectedCss="false"
   RenderAnchorSelectedCss="true"
   UlCssClass="art-hmenu"
   LiCssClassWithChildren=""
   LiCssClassWithoutChildren=""
   LiSelectedCssClassWithChildren=""
   LiSelectedCssClassWithoutChildren=""
   LiChildSelectedCssClass=""
   LiParentSelectedCssClass=""
   AnchorCssClass=""
   AnchorSelectedCssClassWithChildren="active"
   AnchorSelectedCssClassWithoutChildren="active"
   AnchorChildSelectedCssClass=""
   AnchorParentSelectedCssClass=""
   InnerSpanMode="Artisteer"
 
  />

You could then add the UseNet35Mode there if you want to.

Hope it helps,

Joe

4/28/2011 9:24:34 AM
Gravatar
Total Posts 18439

Re: Get rid of PageMenu style="float:left;"

and when using TreeView for the vertical menu this is also needed in theme.skin

<portal:mojoTreeView runat="server" SkinID="PageMenu"
   ContainerCssClass="art-vmenublock"
   ExtraMarkupMode="Artisteer"
   RootUlCssClass="art-vmenu"
   RenderLiCssClasses="true"
   RenderAnchorCss="true"
   LiCssClass=""
   LiRootExpandableCssClass=""
   LiRootNonExpandableCssClass=""
   LiNonRootExpnadableCssClass=""
   LiSelectedCssClass="active"
   LiChildSelectedCssClass="active"
   LiParentSelectedCssClass=""
   AnchorCssClass=""
   AnchorSelectedCssClass="active"
   ExpandDepth="-1"
   ShowExpandCollapse="false"
   PopulateNodesFromClient="false"
 
  />

but again you must remove the UseArtisteer from PageMenu.

Best,

Joe

4/28/2011 9:32:03 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

Hmm.  Odd.  Even though those changes are in my theme.skin file, when I remove the UseArtisteer attribute from the layout.master, the menus lose all styling and revert to unordered lists.  I'm a live site, so I can't spend too much time with it looking like that, so I've added UseArtisteer back, but I'd definitely like to get my skin in line with the latest usage.  Any idea what else I may be missing?

 

edit: I verified that my theme.skin matches those sections perfectly, including the misspelling on LiNonRootExpnadableCssClass="".

 

second edit: I had actually brought in that theme.skin file from one of the updated artisteer templates a couple days ago.  I was not able to do the same with layout.master because it is fairly customized, which is why some of the old parameters are still there.

4/28/2011 9:52:45 AM
Gravatar
Total Posts 18439

Re: Get rid of PageMenu style="float:left;"

When I view the source of your page I see the style blocks for the menus at the top which means either UseNet35Mode is working or you are actually running under .NET 3.5.

If you are running under .NET 3.5 then there is no javascript adding the float:left and if you are running .NET 4 but UseNet35Mode is enabled it also has no javascript, so the float must actually be coming from CSS.

If you are hosted under .NET 3.5 with Medium Trust, see also the important notes about medium trust at the bottom of the Understanding the theme.skin file document.

Hope it helps,

Joe

4/28/2011 10:38:09 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

At this point, I'll go with the override, but in case you feel like chasing it down any further, here's my system information and layout.master (minus chat script and phone numbers):

The rest of my skin files are all from the latest artisteer 3.0 vertical menu 2 skin, except layout.master which I manually integrated.  I guess I must have missed the UseArtisteer change from that skin, but I think I got the rest of the big changes.

mojoPortal Version 2.3.6.5 MSSQL
Operating System Microsoft Windows NT 5.2.3790 Service Pack 2
ASP.NET Info v4.0.30319 Running in Full Trust
Server Time Zone Eastern Daylight Time
Server Local Time (GMT -4) 4/28/2011 11:34:51 AM
Greenwich Mean Time (GMT/UTC) 4/28/2011 3:34:51 PM

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="~/App_MasterPages/layout.Master.cs"
    Inherits="mojoPortal.Web.layout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head id="Head1" runat="server">
    <title></title>
    <%-- JQueryUIThemeName valid options are:
    base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks,
    humanity, le-frog, mint-choc, overcast, pepper-grinder,
    redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader
    --%>
    <portal:StyleSheetCombiner ID="StyleSheetCombiner" runat="server" JQueryUIThemeName="redmond"
        UseIconsForAdminLinks="false" UseTextLinksForFeatureSettings="false" EnableNonClickablePageLinks="true" />
    <portal:IEStyleIncludes ID="IEStyleIncludes1" runat="server" IncludeHtml5Script="false"
        IE6CssFile="style.ie6.css" IE7CssFile="style.ie7.css" />
    <portal:MetaContent ID="MetaContent" runat="server" />
    <!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
    <![endif]-->
    <portal:Favicon ID="Favicon1" runat="server" />
    <portal:ScriptLoader ID="ScriptLoader1" runat="server" IncludeSizzle="true" />
    <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="script.js" />
    <link rel="alternate" type="application/rss+xml" title="DidItBetter Site Feed" href="http://www.diditbetter.com/rss.aspx" />
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Architects+Daughter|Ubuntu:bold" />
    <meta name="google-site-verification" content="k28qxC9lUuCaoGSNaMo3PRRd2lbToaqKumllDGyYQFY" />
</head>
<body class="pagebody" id="Body" runat="server">
<portal:AnalyticsAsyncTopScript id="analyticsTop" runat="server" />
    <form id="frmMain" runat="server">
    <asp:SiteMapDataSource ID="SiteMapData" runat="server" ShowStartingNode="false" />
    <asp:SiteMapDataSource ID="PageMapDataSource" runat="server" ShowStartingNode="false" />
    <asp:SiteMapDataSource ID="ChildPageSiteMapData" runat="server" ShowStartingNode="false" />
    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />
    <div id="art-page-background-simple-gradient">
    </div>
    <div id="art-page-background-glare">
        <div id="art-page-background-glare-image">
        </div>
    </div>
    <div id="art-main">
        <div class="art-sheet">
            <div class="art-sheet-tl">
            </div>
            <div class="art-sheet-tr">
            </div>
            <div class="art-sheet-bl">
            </div>
            <div class="art-sheet-br">
            </div>
            <div class="art-sheet-tc">
            </div>
            <div class="art-sheet-bc">
            </div>
            <div class="art-sheet-cl">
            </div>
            <div class="art-sheet-cr">
            </div>
            <div class="art-sheet-cc">
            </div>
            <div class="art-sheet-body">
                <div class="art-header">
                    <div class="art-header-png"></div>
                    <div class="art-header-jpeg">
                    </div>
                    <div class="art-logo">
                        <portal:SkipLink ID="SkipLink1" runat="server" />
                        <mp:InsecurePanel ID="InsecurePanel1" runat="server" CssClass="addthisbutton">
                            <portal:mojoAddThisButton ID="at2" runat="server" AccountId="" ButtonImageUrl="~/Data/SiteImages/addthisbookmarkbutton.gif"
                                Text="Share This Using Popular Bookmarking Services" CustomBrand="" CustomLogoUrl=""
                                CustomLogoBackgroundColor="" />
                        </mp:InsecurePanel>
                    </div>
                </div>
                <div class="art-nav">
                    <div class="l">
                    </div>
                    <div class="r">
                    </div>
                    <portal:SearchInput ID="SearchInput1" LinkOnly="False" RenderAsListItem="false" runat="server" />
                    <portal:SiteMenu ID="SiteMenu1" runat="server" UseTreeView="false" UseArtisteer="true"
                        HideMenuOnSiteMap="false" Direction="Horizontal" TopLevelOnly="false"></portal:SiteMenu>
                </div>
                        <asp:Panel ID="divAlt1" runat="server" CssClass="altcontent1">
                            <asp:ContentPlaceHolder ID="altContent1" runat="server"></asp:ContentPlaceHolder>
                        </asp:Panel>
                <div class="art-content-layout">
                <div class="art-content-layout-row">
                    <asp:Panel ID="divLeft" runat="server" CssClass="art-layout-cell art-sidebar1 leftside" Visible="True"
                        SkinID="pnlPlain">
                        <asp:ContentPlaceHolder ID="leftContent" runat="server">
                        </asp:ContentPlaceHolder>
                    </asp:Panel>
                    <asp:Panel ID="divCenter" runat="server" Visible="True" CssClass="center-rightandleftmargins"
                        SkinID="pnlPlain">
                        <portal:Breadcrumbs ID="Breadcrumbs" runat="server"></portal:Breadcrumbs>
                        <portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
                        <a id="startcontent"></a>
                        <asp:ContentPlaceHolder ID="mainContent" runat="server">
                        </asp:ContentPlaceHolder>
                    </asp:Panel>
                    <asp:Panel ID="divRight" runat="server" Visible="True" CssClass="art-layout-cell art-sidebar2 rightside"
                        SkinID="pnlPlain">
                        <asp:ContentPlaceHolder ID="rightContent" runat="server">
                        </asp:ContentPlaceHolder>
                            <portal:PageMenu id="PageMenu1" runat="server" UseArtisteer="true" UseTreeView="false" IsSubMenu="true" TreeViewShowExpandCollapse="false"  />
                    </asp:Panel>
                    </div>
                </div>
                        <asp:Panel ID="divAltContent2" runat="server" CssClass="altcontent2">
                        <asp:ContentPlaceHolder ID="altContent2" runat="server"></asp:ContentPlaceHolder>
                        </asp:Panel>

                <div class="cleared">
                </div>
                <div class="art-footer">
                    <div class="art-footer-t"></div>
                    <div class="art-footer-l"></div>
                    <div class="art-footer-b"></div>
                    <div class="art-footer-r"></div>
                    <div class="art-footer-body">
                        <div class="floatpanel">
                            <div class="floatpanel section" style="width:10%">
                                <ul>
                                    <li class="firstnav"><a href="/Default.aspx">Home</a></li>
                                    <li><a href="/downloads.aspx">Downloads</a></li>
                                    <li><a href="/promotions.aspx">Promotions</a></li>
                                    <li><a href="http://store.diditbetter.com/">Store</a></li>
                                    <li><a href="/Secure/Register.aspx">Register</a></li>
                                </ul>
                            </div>
                            <div class="floatpanel section" style="width:20%">
                                <ul>
                                    <li class="firstnav"><a href="/products.aspx">Products</a></li>
                                    <li><a href="/add2exchange-enterprise.aspx">Add2Exchange Enterprise</a></li>
                                    <li><a href="/add2exchange-standard.aspx">Add2Exchange Standard</a></li>
                                    <li><a href="/taskcontroller.aspx">TaskController</a></li>
                                    <li><a href="/didit.aspx">DidIT! CRM</a></li>
                                </ul>
                            </div>
                            <div class="floatpanel section" style="width:12%">
                                <ul>
                                    <li class="firstnav"><a href="http://support.diditbetter.com/">Support</a></li>
                                    <li><a href="http://support.diditbetter.com/forums.aspx">Forums</a></li>
                                    <li><a href="http://support.diditbetter.com/knowledgebase.aspx">Knowledgebase</a></li>
                                    <li><a href="http://support.diditbetter.com/guides.aspx">Guides</a></li>
                                    <li><a href="http://support.diditbetter.com/faq.aspx">FAQ</a></li>
                                </ul>
                            </div>
                            <div class="floatpanel section" style="width:13%">
                                <ul>
                                    <li class="firstnav"><a href="/company.aspx">Company</a></li>
                                    <li><a href="/contact.aspx">Contact</a></li>
                                    <li><a href="/blog.aspx">Blog</a></li>
                                    <li><a href="/news.aspx">News</a></li>
                                    <li><a href="/resellers">Resellers</a></li>
                                </ul>
                            </div>
                            <div class="floatpanel section" style="width:29%">
                                <iframe class="centered" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FDidItBettercom-Software%2F160122340676863&amp;width=250&amp;colorscheme=light&amp;show_faces=false&amp;stream=false&amp;header=false&amp;height=66" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:66px;margin-top:7px" allowTransparency="true"></iframe>
                            </div>
                            <div class="floatpanel section" style="width:16%">
                                <a class="eletter" href="/eletter/" title="Subscribe to our newsletter"></a>
                                <a class="rss" href="http://www.diditbetter.com/feeds.aspx" title="Click to view our available feeds"></a>
                                <a class="twitter" href="http://twitter.com/diditbetter" title="Follow us on twitter"></a>
                                <a class="linkedin" href="http://www.linkedin.com/company/1379976" title="Follow us on LinkedIn"></a>
                                <a title="Bookmark us on Digg" class="digg" href="http://digg.com/submit?url=http%3a%2f%2fsupport.diditbetter.com%2f&amp;title=DidItBetter+Support+-+Home"></a>
                                <a title="Bookmark us on Delicious" class="delicious" href="http://delicious.com/save?url=http%3a%2f%2fsupport.diditbetter.com%2f&amp;title=DidItBetter+Support+-+Home"></a>
                                <a title="Bookmark us on StumbleUpon" class="stumble" href="http://www.stumbleupon.com/submit?url=http%3a%2f%2fsupport.diditbetter.com%2f&amp;title=DidItBetter+Support+-+Home"></a>
                                <a class="youtube" href="http://www.youtube.com/user/diditbettersoftware" title="Watch the DidItBetter Channel on YouTube"></a>
                            </div>
                        </div>
                        <div class="art-footer-text">
                            <p>
                                <portal:WelcomeMessage ID="WelcomeMessage" runat="server" CssClass="sitemaplink" />
                                |
                                <portal:SiteMapLink ID="SiteMapLink1" runat="server" CssClass="sitemaplink" />
                                |
                                <portal:SkinPreview ID="SkinPreview1" runat="server"></portal:SkinPreview>
                                |
                                Copyright 2011 DidItBetter Software
                                |
                                <strong></strong>
                                |
                                <strong></strong>
                                |
                                <portal:UserProfileLink ID="UserProfileLink" runat="server" CssClass="sitemaplink" />
                           </p>
                        </div>
                    </div>
                </div>
                <div class="cleared">
                </div>
            </div>
            <div class="cleared">
            </div>
        </div>
        <div class="cleared">
        </div>
        <p class="art-page-footer">
            <br />
            <br />
        </p>
    </div>
    <div class="topnavwrap">
    <div class="topnav">
                        <ul>
                            <portal:MyPageLink ID="MyPageLink1" runat="server" RenderAsListItem="true" />
                            <portal:MailboxLink ID="MailboxLink1" runat="server" RenderAsListItem="true" />
                            <portal:RegisterLink ID="RegisterLink" runat="server" RenderAsListItem="true" />
                            <portal:LoginLink ID="LoginLink" runat="server" RenderAsListItem="true" />
                            <portal:LogoutLink ID="LogoutLink" runat="server" RenderAsListItem="true" />
                        </ul>
                    </div>
                    </div>

    <script type="text/javascript">
        function HideMenuToolbar() { $("#toolbar").fadeOut(); $("#toolbarbut").fadeIn("slow"); }
        function ShowMenuToolbar() { $("#toolbar").fadeIn(); $("#toolbarbut").fadeOut("slow"); }
        $(document).ready(function() {
            $("span.downarr a").click(function() { HideMenuToolbar(); Set_Cookie('openstate', 'closed') });
            $("span.showbar a").click(function() { ShowMenuToolbar(); Set_Cookie('openstate', 'open') });
            $("span.downarr a, span.showbar a").click(function() { return false; });
            var openState = Get_Cookie('openstate');
            if (openState != null) { if (openState == 'closed') { HideMenuToolbar(); } if (openState == 'open') { ShowMenuToolbar(); } }
        });
    </script>

    <portal:AutoHidePanel ID="ah1" runat="server">
        <div id="toolbarbut">
            <span class="showbar"><a href="#">show bar</a></span>
        </div>
        <div id="toolbar">
            <div class="toolbarleft">
                &nbsp;
            </div>
            <div class="toolbarright">
                <span class="downarr"><a href="#"></a></span>
                <portal:AdminMenuLink ID="lnkAdminMenu" runat="server" />
                <portal:FileManagerLink ID="lnkFileManager" runat="server" />
                <portal:NewPageLink ID="lnkNewPage" runat="server" />
                <portal:PageEditFeaturesLink ID="lnkPageContent" runat="server" />
                <portal:PageEditSettingsLink ID="lnkPageSettings" runat="server" />
                <asp:ContentPlaceHolder ID="pageEditContent" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
    </portal:AutoHidePanel>
    <portal:Woopra ID="woopra11" runat="server" />
    </form>
    <portal:AnalyticsAsyncBottomScript ID="analyticsBottom" runat="server" />
    </body>
</html>
 

4/28/2011 10:42:23 AM
Gravatar
Total Posts 18439

Re: Get rid of PageMenu style="float:left;"

 <portal:SiteMenu ID="SiteMenu1" runat="server" UseTreeView="false" UseArtisteer="true"
                        HideMenuOnSiteMap="false" Direction="Horizontal" TopLevelOnly="false"></portal:SiteMenu>

You still have UseArtisteer="true" which is why the new settings don't work, that makes it use the legacy artisteer menu.

4/28/2011 11:00:02 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

Just to clarify, as I posted before, when that was removed the menus don't render as menus at all, just ordered lists.  Since I'm a live site, I couldn't leave it that way and so added it back in.

4/28/2011 11:37:12 AM
Gravatar
Total Posts 18439

Re: Get rid of PageMenu style="float:left;"

That means either you don't have the right stuff in theme.skin or it is not noticing your changes to theme.skin. Editing theme.skin "should" clear the cache but I have seen times when it doesn't, you may need to touch Web.config after editing theme.skin to clear the theme cache.

Hope it helps,

Joe

4/28/2011 11:43:15 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

Thanks Joe, I appreciate the pointers.  At this point I'm going to let it ride with the direct css override as you suggested before.

Thanks again, both Joes.

4/28/2011 11:47:07 AM
Gravatar
Total Posts 18439

Re: Get rid of PageMenu style="float:left;"

one more thing I thought of, you need to copy theme.skin stuff from a skin exported from the same version of Artisteer as your design was exported from, because the menu/treeview container div css class is different in different versions and if you don't have the right one it won't work.

12/1/2011 9:53:04 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

I'm revisiting this thread after a long while.  Looking back on it, I sure seem thick.  Sorry for my newbishness.  I now have the ability to do offline development with WebMatrix, which is fantastic and makes these things so much easier to play with.  Thanks guys for your persistence and for supporting great development tools.

I started a new skin for another site using the latest artisteer30 skins in 2.3.7.0.  Artisteer 3 of course.

In the process, I went a bit deeper on making layout.master's tree structure match that of what Artisteer generates.  I got everything on this new skin looking great, but my old friend the pesky float was there, of course.

Looking back at your article on The Trouble With ASP.NET Menu, I saw the explanation for the additional classes is the Javascript associated with the menus.  I tooled around with this a bit and found a solution to disable that Javascript, so I figured I'd share it here. Fortunately, it's very simple.  See what you think.

The additional attributes on the menu markup, including the style: floats, comes from the ASP.NET AJAX scripts made specifically for the menu.  According to the articles I read, the script in question is fed to the page as "ScriptResource.axd", along with a set of query parameters tagged on the end to identify the desired script, since there's more than one.

Looking through the two ScriptResource.axd references served by the new design, I found the one that was manipulating the menu markup.  So far, so good.

I also ran across two articles on how to override these scripts through markup in the layout.master file.  They are here and here.  Apparently, the scripts are housed in .NET assemblies and pulled at run-time, so you can't change those scripts directly but you can instead specify that ASP should pull them as plain .js files from a path on your site.  Here's the additional markup:

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" >
<Scripts>
<asp:ScriptReference name="MenuStandards.js" assembly="System.Web" path="MenuStandards.js"/>
</Scripts>
</asp:ScriptManager>

The MenuStandards.js script does all of the manipulation.  To see it, you can either save the source of this script from the page before you update layout.master or you can download it from Microsoft's CDN at http://ajax.aspnetcdn.com/ajax/4.0/1/MenuStandards.js.  In fact, you can see a listing of all the scripts available from the CDN at http://www.asp.net/ajaxlibrary/CDNAjax4.ashx.

If you add the MenuStandards.js file in the same directory as layout.master and use the above scriptreference markup, you'll achieve the same effect with the page as the original, however it will be fetching MenuStandards.js from the filesystem and not from ScriptResources.axd, thus giving you control over what the script can do.

There would be two approaches, the surgical and the brute force.  The surgical method would be to cut out the pieces that you don't want from MenuStandards.js and leave the rest.

While this would probably be advisable when you aren't sure what functionality is supplied by the script aside from the annoying floats, I went with the brute force approach and it seems fine for me so far.  The brute force approach is of course to just empty out the file.  The menu renders as Artisteer intended now, at least with this skin.

For the record, I tried various methods of avoiding having to have a blank .js file by, for example, not including the path attribute in the scriptreference, but I couldn't find a way to make that approach work.

Hope this helps someone else as well.

One more thing, the technique on how I found the script name (and assembly) in the first place, since you can't divine that from ScriptResource.axd.  I found an article here which told me you can completely override all of the .NET scripts using a  scriptmanager attribute ScriptPath, which forces it to look for all such ScriptResource.axd scripts on the filesystem.  Doing this led to a combination of exceptions and 404s on the scripts the page was looking for, all given by their regular name and filesystem path.  The path happens to include the assembly name.  You can download each of the named files from the MS CDN (link above), create their path and put them in there to get past one exception to see the next.  Voila.

You must sign in to post in the forums. This thread is closed to new posts.