SiteMenu styling issue

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.
9/19/2010 10:21:01 PM
JohnnyNoir
Gravatar
Total Posts 2
View Posts

SiteMenu styling issue

I'm having an issue styling the SiteMenu. I used the 'Styleshout-brightsideoflife' skin as a starting point. I'm using version 2.3.5.2 of MojoPortal and I'm running it with the .Net 4.0 framework. The problem is that I want to center the SiteMenu and I've been unable to circumvent the float left behavior. I used MS Expression Web 4 SuperPreview to see the css involved. It appears 'float:left' and 'cssfloat:left' are both being injected into each element.

...

<div id="ctl01_SiteMenu1_ctl00" class="AspNet-Menu-Horizontal" style="float:left, cssfloat:left">
<ul class="Aspnet-Menu static" style="position:relative, width:auto, float:left,cssfloat:left">
<li class="Aspnet-Menu-Leaf AspNet-Menu-SelectedLeaf static" style="position:relative, float:left,cssfloat:left">
<li class="Aspnet-Menu-Leaf static" style="position:relative, float:left,cssfloat:left">
<li class="Aspnet-Menu-Leaf static" style="position:relative, float:left,cssfloat:left">
<li class="Aspnet-Menu-Leaf static" style="position:relative, float:left,cssfloat:left">
<li class="Aspnet-Menu-Leaf static" style="position:relative, float:left,cssfloat:left">
<li class="Aspnet-Menu-Leaf static" style="position:relative, float:left,cssfloat:left">
<li class="Aspnet-Menu-Leaf static" style="position:relative, float:left,cssfloat:left">

...

It appears any float options I put in the stylemenu.css file are replaced with "position:relative, float:left,cssfloat:left". Any idea how to get around this?

 

9/20/2010 10:19:41 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: SiteMenu styling issue

This stuff is added by javascript added by the .NET 4 ASP.NET Menu.

The only way I know to override it is to use the !important in CSS

something like this might do it

.AspNet-Menu-Horizontal { float: none !important; }

.Aspnet-Menu { float:none !important; }

and so on for any classes affected

Hope it helps,

Joe

9/20/2010 11:48:59 PM
JohnnyNoir
Gravatar
Total Posts 2
View Posts

Re: SiteMenu styling issue

Joe,

Thanks so much. I tried the css changes, but unfortunately they didn't work. As I was in the early stages of development, I decided to go with the 3.5 framework as my work around. The issue is gone! Thanks again.

Bob 

9/25/2010 9:34:30 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: SiteMenu styling issue

Hi Bob,

It would be far better to solve it by CSS.

Make sure you understand about how CSS is cached, otherwise you might not think the CSS change has any effect when it really would if you clear the cache.

http://www.mojoportal.com/skinning-overview.aspx

Hope it helps,

Joe

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