I've got this in my master page

<asp:Menu ID="MainNav" runat="server"   

DataSourceID="DefaultSiteMapDataSource"
      orientation="Horizontal"
      maximumdynamicdisplaylevels="0"
      skiplinktext=""
      staticdisplaylevels="2" PathSeparator=" | "
      ForeColor="#ffffff" />

and this in my CSS

.MainNav {
    text-transform: uppercase;
    font-size: 10px;
}

yet, looking at the generated HTML, this is what its generating out

<td style="white-space:nowrap;"><a class="Master_MainNav_1" href="/Default.aspx">Home</a></td>

meaning that the hyperlink is not picking up the assigned styles

any ideas?

i need to keep it to CSS so it adjusts gracefully with just Themes

this exact code has worked on other sites and theres no reason why CssClass="MainNav" should generate as class="Master_MainNav_1" like it is (btw, i set the ID of my master to "Master"

It appears that you don't have a CssClass set on your Menu declaration.  In order to apply your own CssClasses, you should use the CssClass property on the Menu as a previous poster said.

The class that you are seeing appears to be the default name of the styles that the menu emits.  Typically the naming convention will be something like:  controlsClientId_[0-n].  So you'll see something like:  .Menu1_0, .Menu1_1, .Menu1_2, etc.  With the control in naming containers like Panel1_Menu1_0 or similar.   

--

Danny

I swear i had that set at one point!! :)

Anyways, so so more of an attempt to fix this issue, now i have

<asp:Menu ID="MainNav" runat="server"
          CssClass="MainNav"
          DataSourceID="DefaultSiteMapDataSource"
          orientation="Horizontal"
          maximumdynamicdisplaylevels="0" 
          skiplinktext="" 
          staticdisplaylevels="2" PathSeparator=" | "
          ForeColor="#ffffff" />

Checking in the "DataBoundEvent"


Protected Sub MainNav_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles MainNav.DataBound
      HttpContext.Current.Trace.Warn("Class: " & MainNav.CssClass)
End Sub


tells me this in the trace log

<table id="Master_MainNav" class="MainNav Master_MainNav_2" cellpadding="0" cellspacing="0" border="0">

"MainNav Master_MainNav_2" ???  Absolutely perplexing :(

MorningZ wrote:

Now checking the generated HTML:

<table id="Master_MainNav" class="MainNav Master_MainNav_2" cellpadding="0" cellspacing="0" border="0">

"MainNav Master_MainNav_2" ???  Absolutely perplexing :(

This means that two CSS classes are being applied to the table:  MainNav AND Master_MainNav_2.  MainNav is the class that you applied through the property.  Master_MainNav_2 is the one that comes from the Menu control.  If you look at the style block on the page, you should see a set of styles called: 

.Master_MainNav_1
.Master_MainNav_2
.Master_MainNav_3
etc...

There is no way to avoid these, these styles are necessary for the menu to function correctly.  One of the functions, for example, is to hide the dynamic flyouts by default.  If you try and alter the appearance through the styles (such as StaticHoverStyle-BackColor) you would see it appear in one of these default styles. 

Hope that helps you decipher your output.
--
Danny

ok, so what i am confused about:

What you appear to be saying is that there is no way to set the menu item's styles from a .css file because the framework will always and no matter what put theNav _1 class there as well?

that kinda sucks :(

Danny, of course you could have pointed me to this post on your blog, lol

i don't know why just now it came up through my RSS reader, but good stuff in there and looks like it'll help me both understand whats going on under the hood and solve my problem.....

MorningZ wrote:

ok, so what i am confused about:

What you appear to be saying is that there is no way to set the menu item's styles from a .css file because the framework will always and no matter what put theNav _1 class there as well?

that kinda sucks :(

That's not quite what I'm saying: 

What I mean to say is that there is no way to get around a minimal set of styles that we put into the Menu.  They are there to make the menu functional correct but we've done as little as possible to intefere with your ability to customize it's look and feel.

Users are still able to add their own styles from a .css file and they will get applied to the rendering where appropriate.  For example:

.a { background-color: blue; }
.b { z-index: 10; }

<table class="a b" >...</table> 

In this case, both classes a AND b get applied, not just b.  The table has a z-index of 10 and a background color of blue.  This is what is happening in your output.  Two clases (or more) are being applied to the various elements in the menu's rendering.  All of them get applied (although conflicts sometimes do arise and get resolved by IE/FF/etc). 

I think you might find it much clearer if you change the CssClass and the ID to be different names.  Your CssClass and the built in one will be much more distinct.

Although, perhaps I am missing something about what you're asking.
--
Danny

MorningZ wrote:

<asp:Menu ID="MainNav" runat="server"   

DataSourceID="DefaultSiteMapDataSource"
      orientation="Horizontal"
      maximumdynamicdisplaylevels="0"
      skiplinktext=""
      staticdisplaylevels="2" PathSeparator=" | "
      ForeColor="#ffffff" />

 

MainNav {
    text-transform: uppercase;
    font-size: 10px;
}

RTernier wrote:

Your error is your trying to reference an ID (object) through a CSS class declaration.