[RESOLVED]Can Someone here Explain How to Fix this Quirky Behavior

In my Master Page I have the Following Menu Control, and associated Sitemap Datasource:

<div id="menu">
          <asp:menu ID="mnuNavigation" runat="server" DataSourceID="NavigationDatasource"
                Orientation="Horizontal"  RenderingMode="List" CssClass="simplemenu black"></asp:menu>
           <asp:SiteMapDataSource ID="NavigationDatasource" runat="server" ShowStartingNode="false" />
        </div>

and the associated CSS File, with the assortment of colors:

/* BEGIN BLACK */

.simplemenu.black ul {
	width: 100%;
	height: 43px;
	background: #FFF url(../images/menu/simplemenu/menu-bg-black.gif) repeat-x top left;
	font-size: 0.8em;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-weight: bold;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.simplemenu.black ul li {
	display: block;
	float: left;
	margin: 0 0 0 5px;
}
.simplemenu.black ul li a {
	height: 43px;
	color: #777;
	text-decoration: none;
	display: block;
	float: left;
	line-height: 200%;
	padding: 8px 15px 0;
}
.simplemenu.black ul li a.static.highlighted {
	color: #333;
}
.simplemenu.black li a.static.selected {
	color: #FFF;
	background: #FFF url(../images/menu/simplemenu/current-bg-black.gif) repeat-x top left;
	padding: 5px 15px 0;
}

/* BEGIN BLUE */
....

This Produces a valid menu, but please see image: (blue border drawn to make sure div width is 100%)

Menu Error

Would someone please tell me why the <asp:menu> control refuses to render the rest of the image across the div, as the standard html - http://www.cssmenumaker.com/menus/017/  – rendering
displays the black line accross the entire div, or better yet how to fix it, so that I can keep my Web.sitemap, and cut out part of my development time, as opposed to coding the menu by hand?  Pasting it in as HTML does draw it across the entire div, but I
have no way to set the div class to current when a page loads, and Googling leads me to believe that others arent so fortunate either.

Advice Please,
Frustrated Web Developer

PS.  I have a working bubble style menu, at
www.lencosolutions.com
that is displaying properly, using the same technique, but I’m a perfectionist, and think these tabs wd be a better fit.

Hi,

Can you tell me which VS version you are using. I am actually have a different problem, that I am using VS 2005 and when i want to use RenderMode = "LIST"

This Property Shows an error ? Why I Don’t know.

Render Mode List outputd the Menu as a CSS style list and is only available in .NET 4.0.  All Previous versions output as Tables.

I Download the Framework 4.0 and Install it. but i don’t know how to use it. Can you please tell me ….

In Design mode, click on the asp.net menu control and then press F4 to display its properties pane…. You will find Width and HorizontalPadding properties. Set the Width to 100% and HorizontalPadding to say 10px.

Don’t use a strict DTD as in the cssmenumaker.com example.

Have you opened iot up in IE8+, Firebug, or Chrome and looked at the CSS tab of the debugger and see what is applying the border when you inspect it? They will give you the line in the CSS that applies it.

Eric

I slept on it and figured it out, here is the answer, and as I figured, it is the quirky behavior of the Menu Control when rendering an element:

Answer:
Each CssClass in the MenuControl Must have a Master Container to inherit a background from.  The offending line in the ul was:

background: #FFF url(../images/menu/simplemenu/menu-bg-black.gif) repeat-x top left;

This CSS must be taken out of the ul CSS and added to its own like so:

.simplemenu.black 
{
    width:100%;
    background: #FFF url(../images/menu/simplemenu/menu-bg-black.gif) repeat-x top left;
display:inline-block; }

This needs to be done because the page rendering output ignores any bacgrounds in your CSS and replaces them all with .level1 and .level1 selected classes. 

Please Mark this as Answer Forum Mods

Leave a Reply