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

4/27/2011 4:43:53 PM

Ted Lilley

Total Posts 73

View Posts

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

Joe Davis

Total Posts 2253

View Posts

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

Ted Lilley

Total Posts 73

View Posts

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

Joe Davis

Total Posts 2253

View Posts

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

Ted Lilley

Total Posts 73

View Posts

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

Joe Davis

Total Posts 2253

View Posts

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

Ted Lilley

Total Posts 73

View Posts

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

Joe Audette

Total Posts 18439

View Posts

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

Joe Audette

Total Posts 18439

View Posts

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

Ted Lilley

Total Posts 73

View Posts

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

Joe Audette

Total Posts 18439

View Posts

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