ASP.NET Forums/Advanced ASP.NET/CSS Friendly Control Adapters/Documentation is lacking?

Documentation is lacking? [Answered]RSS

40 replies

Last post May 13, 2008 12:02 PM by Falcon

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    Apr 26, 2008 08:02 PM|OutOfTouch|LINK

    I guess the control adapters emit this javascript when rendering but that still doesn't answer my question as I have almost no functionality with the menu in IE right now.

    In FireFox I still can't get the dang activeArrowRight.gif to show when hovering over the menu, I have to get this working and the menu working in IE soon!!!

    2nd level and 3rd level menu items are not showing at all in IE 7, is the Javascript not working?

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    Apr 27, 2008 04:06 AM|OutOfTouch|LINK

    I give up, below is my modified MenuExample.css and the actual html being rendered in FIreFox. The html being rendered does not match the examples html rendering. I am ready to  back this out of my project if it doesn't work.

    Rendered HTML:

     

    <div id="main-navigation">
    
    
                     
    
                     
    
    <div class="PrettyMenu" id="ctl00_mnuMain">
    	<div class="AspNet-Menu-Horizontal">
    			<ul class="AspNet-Menu">
    				<li class="AspNet-Menu-Leaf">
    					<a href="/mysite/Default.aspx" class="AspNet-Menu-Link">
    						Home</a>
    				</li>
    				<li class="AspNet-Menu-WithChildren  AspNet-Menu-ChildSelected">
    
    
    					<span class="AspNet-Menu-NonLink  AspNet-Menu-ChildSelected">
    						Admin</span>
    					<ul>
    						<li class="AspNet-Menu-WithChildren">
    							<span class="AspNet-Menu-NonLink">
    								Manage Companies</span>
    							<ul>
    								<li class="AspNet-Menu-Leaf">
    
    
    									<a href="/mysite/Administration/ManageCompanies/CreateCompany.aspx" class="AspNet-Menu-Link">
    										Create A New Company</a>
    								</li>
    							</ul>
    						</li>
    						<li class="AspNet-Menu-WithChildren  AspNet-Menu-ChildSelected">
    							<span class="AspNet-Menu-NonLink  AspNet-Menu-ChildSelected">
    								Manage Users</span>
    
    
    							<ul>
    								<li class="AspNet-Menu-Leaf">
    									<a href="/mysite/Administration/ManageUsers/NewUser.aspx" class="AspNet-Menu-Link">
    										Create A New User Account</a>
    								</li>
    								<li class="AspNet-Menu-Leaf  AspNet-Menu-Selected">
    									<a href="/mysite/Administration/ManageUsers/ManageProfile.aspx" class="AspNet-Menu-Link  AspNet-Menu-Selected">
    										Manage Profile</a>
    
    
    								</li>
    								<li class="AspNet-Menu-Leaf">
    									<a href="/mysite/Administration/ManageUsers/ChangePassword.aspx" class="AspNet-Menu-Link">
    										Change Password</a>
    								</li>
    							</ul>
    						</li>
    					</ul>
    
    
    				</li>
    				<li class="AspNet-Menu-WithChildren">
    					<span class="AspNet-Menu-NonLink">
    						Orders</span>
    					<ul>
    						<li class="AspNet-Menu-Leaf">
    							<a href="/mysite/Orders/ChooseLocation.aspx" class="AspNet-Menu-Link">
    								Choose Order Location</a>
    
    
    						</li>
    					</ul>
    				</li>
    				<li class="AspNet-Menu-WithChildren">
    					<span class="AspNet-Menu-NonLink">
    						Help</span>
    					<ul>
    						<li class="AspNet-Menu-Leaf">
    
    
    							<a href="/mysite/Help/LostPassword.aspx" class="AspNet-Menu-Link">
    								Lost Password</a>
    						</li>
    					</ul>
    				</li>
    			</ul>
    
    
    	</div>
    </div>
    
    
                </div>

     Modified MenuExample.css

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */
    
    /* This style sheet is intended to contain OFTEN CHANGED rules used when the Menu control adapter is enabled. */
    
    /* When the Menu control's Orientation property is Vertical the adapter wraps the menu with DIV */
    /* whose class is AspNet-Menu-Vertical. */
    /* Note that the example menu in this web site uses relative positioning to force the menu to occupy */
    /* a specific place in the web page.  Your web site will likely use a different technique to position your */
    /* menu.  So feel free to change all the properties found in this CSS rule if you clone this style sheet. */
    /* There is nothing, per se, that is magical about these particular property value choices.  They happen to */
    /* work well for the sample page used to demonstrate an adapted menu. */
    .PrettyMenu .AspNet-Menu-Vertical
    {
        position:relative;
        top: 3em;
        left: 0;
        z-index: 300;
    }
    
    /* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */
    /* So, effectively says: style all tiers in the menu this way... */
    .PrettyMenu ul
    {
       /* background:<span class='val'> black</span>; #7795BD;*/
    }
    
    /* Top tier */
    .PrettyMenu .AspNet-Menu-Vertical ul.AspNet-Menu
    {
        width: 9em;
    }
    
    /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
    /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
    /* the topmost tier's appearance. */
    .PrettyMenu ul.AspNet-Menu ul
    {
        width: 20.5em;
        left: 8.9em;
        top: -1em;
        z-index: 400;
    }
    
    .PrettyMenu ul.AspNet-Menu ul ul
    {
        width: 11.5em;
        left: 10.4em;
    }
    
    /* The menu adapter generates a list item (li) in HTML for each menu item. */
    /* Use this rule create the common appearance of each menu item. */
    .PrettyMenu ul.AspNet-Menu li
    {
        background:#400000 url(bg_nav.gif) repeat-x;
    }
    
    /* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
    /* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
    /* in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. */
    /* The second image comes from this rule (below). */
    .PrettyMenu ul.AspNet-Menu li a,
    .PrettyMenu ul.AspNet-Menu li span
    {
        color: white;
        padding: 4px 2px 4px 8px;
        border: 1px solid #660000;
        border-bottom: 1px solid #660000 ; /*04/25/2008*/
        background: transparent url(arrowRight.gif) right center no-repeat;
    }
    
    /* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
    {
        background-image: none;
    }
    
    /* Not used presently.  This is here if you modify the menu adapter so it renders img tags, too. */
    .PrettyMenu ul.AspNet-Menu li a img
    {
        border-style: none;
        vertical-align: middle;
    }
    
    /* When you hover over a menu item, this rule comes into play. */
    /* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */
    /* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */
    /* See MenuAdapter.js (in the JavaScript folder). */
    .PrettyMenu ul.AspNet-Menu li:hover, 
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
    {
    	background:White;
        color:Black; /*04/25/2008*/
        background-color: white;
    }
    
    .PrettyMenu ul.AspNet-Menu li:hover a, 
    .PrettyMenu ul.AspNet-Menu li:hover span, 
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover a, 
    .PrettyMenu ul.AspNet-Menu li:hover li:hover span, 
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a:hover, 
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover, 
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
    {
        color: Black;
    }
    
    .PrettyMenu ul.AspNet-Menu li:hover ul a, 
    .PrettyMenu ul.AspNet-Menu li:hover ul span, 
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a, 
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span, 
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
    {
        color: White; /*04/25/2008*/
    }
    
    /* While you hover over a list item (li) you are also hovering over a link or span because */
    /* the link or span covers the interior of the li.  So you can set some hover-related styles */
    /* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
    .PrettyMenu ul.AspNet-Menu li a:hover,
    .PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover
    {
        color: Red;
        background: transparent url(activeArrowRight.gif) right center no-repeat;
    }
    
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
    {
        background-image: none;
    }
    
    
    /* -------------------------------------------------------------------------- */
    /* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */
    /* whose class is AspNet-Menu-Horizontal. */
    /* Note that the example menu in this web site uses absolute positioning to force the menu to occupy */
    /* a specific place in the web page.  Your web site will likely use a different technique to position your */
    /* menu.  So feel free to change all the properties found in this CSS rule if you clone this style sheet. */
    /* There is nothing, per se, that is magical about these particular property value choices.  They happen to */
    /* work well for the sample page used to demonstrate an adapted menu. */
    
    .PrettyMenu .AspNet-Menu-Horizontal
    {
    	margin:0 auto;
        position:relative; /*IE does not like this to be relative, is this the floated div problem in IE?*/
        left: .25em;
        top: 0em; /*.25em*/
        z-index: 300;
       
    }
    
    /* This rule controls the width of the top tier of the horizontal menu. */
    /* BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the top tier menu items that are lined */
    /* up from left to right. In other words, this width needs to be the width of the individual */
    /* top tier menu items multiplied by the number of items. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
    {
        width: 65em; /*45*/ /*IE seems to show the entire width instead of just showing what is filled*/
    }
    
    /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
    /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
    /* the topmost tier's appearance. */
    /* Remember that only the topmost tier of the menu is horizontal.  The second and third tiers are vertical. */
    /* So, they need a much smaller width than the top tier.  Effectively, the width specified here is simply */
    /* the width of a single menu item in the second and their tiers. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
    {
        width: 10.5em; /*10.5em*/
        left: 0;
        top: 100%;
    }
    
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
    {
        top: -0.3em;
    }
    
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
    {
        width:11.5em; /*11.5em*/
    }
    
    /* Generally, you use this rule to set style properties that pertain to all menu items. */
    /* One exception is the width set here.  We will override this width with a more specific rule (below) */
    /* That sets the width for all menu items from the second tier downward in the menu. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
    {
        width: 10em; /*5em*/
        text-align:left;
    }
    
    /* This rule establishes the width of menu items below the top tier.  This allows the top tier menu items */
    /* to be narrower, for example, than the sub-menu items. */
    /* This value you set here should be slightly larger than the left margin value in the next rule. See */
    /* its comment for more details. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
    {
        text-align:left;
        width: 12.0em; /*10.5em*/
    }
    
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
    {
        width: 12.0em; /*11.5em*/ /*TopTier*/
    }
    
    /* Third tier menus have to be positioned differently than second (or top) tier menu items because */
    /* they drop to the side, not below, their parent menu item. This is done by setting the last margin */
    /* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */
    /* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul
    {
        margin: .25em 0 0 11.75em; /* Original Value -1.4em 0 0 10.35em;*/
    }
    
     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    Apr 28, 2008 09:57 AM|OutOfTouch|LINK

    Is anybody actually using the Adapters? Judging from the lack of responses to my posts it seems like not many are using this add on. If you are using it or created it I would really appreciate some help in knowing what I did wrong because all I did was copy what was in the kit and it doesn't work for me.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    Apr 28, 2008 10:00 AM|OutOfTouch|LINK

    This CSS rule is not changing anything in my menu except for the Home link I posted above.

    /* While you hover over a list item (li) you are also hovering over a link or span because */
    /* the link or span covers the interior of the li.  So you can set some hover-related styles */
    /* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
    .PrettyMenu ul.AspNet-Menu li a:hover,
    .PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover
    {
        color: Red;
        background: transparent url(activeArrowRight.gif) right center no-repeat;
    }

    Oh yeah and I and ever see the active arrow anywhere.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    Apr 28, 2008 12:26 PM|OutOfTouch|LINK

    Can anybody out there please offer me some help? I don't know why my menu that is bound to a site map is being rendered this way. Is this a bug with the adapter?  Do you need more info like my sitemap?

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    Apr 28, 2008 03:08 PM|OutOfTouch|LINK

    I still have my problem with FireFox and in IE 7 none of the children are showing when hovering over the parent.  There seems to be no community support for this project which in my opinion = a dead project.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    Apr 28, 2008 11:58 PM|OutOfTouch|LINK

    I am begging MS or the original contributor(s) to please help me. I can't figure out why my menu is not rendering like the sample, which is why I think the css rules are not getting applied correctly. PLEASE HELP!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    Apr 30, 2008 12:26 PM|OutOfTouch|LINK

    I now know why I am not seeing the activeArrowRight.gif but I do not know how to solve it.

    My parent menu items don't actually link to a page, the children do. Because my parent menu items don't link to a page they are being rendered by the adapter with a css class like this:

     

    <li class="AspNet-Menu-WithChildren">
    	<span class="AspNet-Menu-NonLink">Help</span>
    	<ul>
    	    <li class="AspNet-Menu-Leaf">
                  <a href="/MySite/Help/LostPassword.aspx" class="AspNet-Menu-Link" title="Reset Current Password">
    	      Lost Password</a>
    	    </li>
    	</ul>
    </li>

    So they are getting a css class of AspNet-Menu-NonLink, if I add url to these parent menu items they render with a class of  AspNet-Menu-Link and the  activeArrowRight.gif now shows. I have no idea what to do to get around this.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 01, 2008 11:58 AM|OutOfTouch|LINK

    Another problem in IE is this code shows black for the entire width specified for the menu instead of the actual filled width by the menu used. So I see black extend out beyond the actual width of the menu, in FireFox it appears to correctly pay attention the width used by the menu and not do this.

    /* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */
    /* So, effectively says: style all tiers in the menu this way... */
    .PrettyMenu ul
    {
        background: black; /*#7795BD;*/
    }
     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 02, 2008 07:12 PM|OutOfTouch|LINK

    If I offered to give some money to a charity of your choice would that help me to get an answer? It has been a week and I still can't get past this problem.

  • MikeJ83 MikeJ83

    Member

    94 Points

    67 Posts

    Re: Documentation is lacking?

    May 06, 2008 02:08 AM|MikeJ83|LINK

     This is how you use the JavaScript:

      

    <script src="/CssAdapters/JavaScript/MenuAdapter.js" type="text/javascript"></script>
     

    If the JavaScript that is responsible for the hover effect is missing, then that is probably the reason the hover effect is not working. Did you download the code from CodePlex or from www.asp.net? You should get the latest version from CodePlex.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 06, 2008 09:39 AM|OutOfTouch|LINK

    Nope I did not download the latest release from code plex I got mine from www.asp.net. I just downloaded the latest version from code plex and my first question is I don't see any css friendly project templates for visual studio like I got with the .VSI  install package off of asp.net site. Do these exist somwhere else? I will give these a go and see if fixes my bugs.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 06, 2008 10:18 AM|OutOfTouch|LINK

    I am confused with the code folder structure from the codeplex version of code. Why is the CSS Folder and JavaScript folder under the dll project? How do I add this to my project now? The same as before?
  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 06, 2008 10:24 AM|OutOfTouch|LINK

    There is no MenuExample.css with this new release?
  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 06, 2008 11:13 AM|OutOfTouch|LINK

    Now my menu is broken in FireFox too. How could this be unless this new dll is rendering differently? The css file I am using is a modified version of MenuExample.css. Before doing this it worked in FireFox. I hate this project and I am starting to think it is absolutely worthless to try and use.
  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 06, 2008 11:22 AM|OutOfTouch|LINK

    I switched back to the old dll I built with the code from www.asp.net and the menu rendered correctly in FireFox. Neithier of these fix my problem with submenus not rendering in IE7. I have been at this for over a week, if I can't get it done today or make some progress then I will abandoned it and highly recommend  to other developers I know not bother trying to use it.  I could have written my own solution by now, but I needed to save time and this hasn't helped.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 06, 2008 01:15 PM|OutOfTouch|LINK

    I don't know what the new css dll is doing that old code didn't do but when using the new one the menu boxes are smaller and the text is appearing below the the menu boxes using the same css file MenuExample.css.

  • ppatrick ppatrick

    None

    0 Points

    8 Posts

    Re: Documentation is lacking?

    May 06, 2008 03:45 PM|ppatrick|LINK

    Well, I am using the menu in ie7 and firefox with no problems, try to do the following steps:

    1 - download the latest source code available at http://www.codeplex.com/cssfriendly/SourceControl/ListDownloadableCommits.aspx
    2 - unzip and open the solution CSSFriendly.sln (ignore source control messages, just press ok)
    3 - build the solution, define the provided web project as the starting project
    4 - go to the debug menu, choose "start without debugging" or just press ctrl+f5 and you can see the working example of the simple menu
    5 - change the SimpleMenu.css to apply to your needs and it's done
    6 - then copy the CSSFriendlyAdapters.browser, the simplemenu.css, the gifs and the CSSFriendly.dll to your application, according to the instructions
     6.1 - Add the CSSFriendlyAdapters.browser file to your App_Browsers directory.
     6.2 - Add the compiled CSSFriendly.dll to your web site's bin directory.
     6.4 - Add the arrow gifs to the folder you prefer
     6.5 - Add the simplemenu.css that you have already changed to the desired look and field in what folder you prefer and do the appropriate include at your aspx, do not forget that if you change the css to another folder or the gifs, different from your aspx folder you need to change the relative path at the css.
     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 06, 2008 04:43 PM|OutOfTouch|LINK

    Thanks for the help not trying to be rude so please don't take it that way, I would never have gotten this far if I haven't done all those things you posted, what I need help with what I already posted a week ago in this thread. The directions you posted are basicaly what the white paper says. I find it strange though that the newest source doesn't include the MenuExample.css basic or enhanced examples. I modified the MenuExample.css for my menu.

    Again the I have never seen an example yet where the SiteMap that the menu is being bound to has parent menu items that have no URL. I think that is the cause of my problems as far as the activeArrow.gif not showing in FireFox. If I add a dummy URL then I see the active arrow, but eithier way I can't get children to show in IE 7, so I must have something wrong.

    If you are using a MasterPage with a menu, are you using any floated divs in your MasterPage layout?  

    Thank for the help.

     

  • MikeJ83 MikeJ83

    Member

    94 Points

    67 Posts

    Re: Documentation is lacking?

    May 06, 2008 05:46 PM|MikeJ83|LINK

    OutOfTouch

    I am confused with the code folder structure from the codeplex version of code. Why is the CSS Folder and JavaScript folder under the dll project? How do I add this to my project now? The same as before?
     

    The CSS and JavaScript are included by the DLL (look for links to WebResource.axd in your rendered HTML).

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 06, 2008 06:06 PM|OutOfTouch|LINK

    So are you saying that this is even worse then the old version now as I have  all adapter css files imported into my page with the import.css file, before I could modify this and only import what I wanted to?

     

  • ppatrick ppatrick

    None

    0 Points

    8 Posts

    Re: Documentation is lacking?

    May 06, 2008 08:24 PM|ppatrick|LINK

    OutOfTouch

    Thanks for the help not trying to be rude so please don't take it that way, I would never have gotten this far if I haven't done all those things you posted, what I need help with what I already posted a week ago in this thread. The directions you posted are basicaly what the white paper says. I find it strange though that the newest source doesn't include the MenuExample.css basic or enhanced examples. I modified the MenuExample.css for my menu.

    Again the I have never seen an example yet where the SiteMap that the menu is being bound to has parent menu items that have no URL. I think that is the cause of my problems as far as the activeArrow.gif not showing in FireFox. If I add a dummy URL then I see the active arrow, but eithier way I can't get children to show in IE 7, so I must have something wrong.

    If you are using a MasterPage with a menu, are you using any floated divs in your MasterPage layout?  

    Thank for the help.

    I am using masterpage, floating divs, it is all a div based design, ...
    I just advice you to use the latest version because in my opinnion it is better than the others, I had some issues that were solved with this latest version.
    If you proceed with all the steps I have specified in the other post and change the provided simplemenu example to use with your sitemap (without changing any css first) do you have any problems with the arrow?

    I have modified the simplemenu example to use a site map with node parents without href to test and it worked well.

     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 06, 2008 11:58 PM|OutOfTouch|LINK

    Hmm, I am still stumped cause I did everything in your list, I copied the CSSFriendly.dll to a folder in my project and added a reference to it and copied the SimpleMenu.css to my app_themes folder and added the link to that in my master page and changed the cssclass on my menu to match the one in the SimpleMenu.css and the menu doesn't render correctly. I see menu text floated beneath the menu boxes and I see small boxes. I will try it again and see if I can get it to work in my MasterPage one more time, I will also just try the binding the menu in the SimpleMenu page to my site map and see if it works.

    Can you post the SimpleMenu html page code you used and the site map?

     Thank You.

     

     

     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 07, 2008 12:24 PM|OutOfTouch|LINK

    I just tried binding the menu in the SimpleMenu.aspx page to my sitemap and the arrows appear to change but it is only showing me two top level menu items, I set the StaticDisplayLevels = 1 and the MaximumDynamicDisplayLevels = 2. I must be missing something.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 07, 2008 01:08 PM|OutOfTouch|LINK

    Doh, ok I increased the width in the css and the SimpleMenu.aspx page does bind to my site map correctly, although this page doesn't have my code to remove nodes based on authorization. I still don't know why it doesn't render correctly in my master page.

  • ppatrick ppatrick

    None

    0 Points

    8 Posts

    Re: Documentation is lacking?

    May 07, 2008 02:23 PM|ppatrick|LINK

    Here is the site map:

     

    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    	<siteMapNode resourceKey="hp" url="~/Default.aspx" title="Home" description="Home" >
    		<siteMapNode url="~/Default.aspx?t=1" title="item 1" description="item 1">
    			<siteMapNode url="~/Default.aspx?t=2" title="item 2" description="item 2">
    			</siteMapNode>
    			<siteMapNode url="~/Default.aspx?f=1" title="item 3" description="item 3">
    				<siteMapNode url="~/Default.aspx?f=2" title="item 4" description="item 4" />
    				<siteMapNode url="~/Default.aspx?f=3" title="item 5" description="item 5" />
    				<siteMapNode url="~/Default.aspx?f=4" title="item 6" description="item 6" />
    				<siteMapNode url="~/Default.aspx?f=5" title="item 7" description="item 7" />
    				<siteMapNode url="~/Default.aspx?f=6" title="item 9" description="item 9" />
    				<siteMapNode url="~/Default.aspx?f=7" title="item 8" description="item 8" />
    			</siteMapNode>
    			<siteMapNode title="item 10" description="item 10">
    				<siteMapNode url="~/Default.aspx?f=2223" title="item 11" description="item 11" />
    			</siteMapNode>
    		</siteMapNode>
    		<siteMapNode  title="item 12" description="item 12" >
    				  	<siteMapNode url="~/Default.aspx?f=22223" title="item 13" description="item 13" />
    			  </siteMapNode>
    	</siteMapNode>
    </siteMap>

     Here is the css file:

    .SimpleEntertainmentMenu ul.AspNet-Menu /* Tier 1 */
    {
        width: 13em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
    }
    
    .SimpleEntertainmentMenu ul.AspNet-Menu ul  /* Tier 2 */
    {
        width: 6em;
        top: 100%;
        left: 0;
    }
    
    .SimpleEntertainmentMenu ul.AspNet-Menu ul ul  /* Tier 3+ */
    {
        top: -0.5em;
        left: 6em;
    }
    
    .SimpleEntertainmentMenu li /* all list items */
    {
        width: 6em;
        background: #eeeeee;
    }
    
    .SimpleEntertainmentMenu li:hover, /* list items being hovered over */
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover
    {
        background: Black;
    }
    
    .SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */
    .SimpleEntertainmentMenu span
    {
        color: Black;
        padding: 4px 2px 4px 8px;
        border:1px solid #cccccc;
        background: transparent url(arrowRight.gif) right center no-repeat;
    }
    
    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, /* leaves */
    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf span
    {
        background-image: none !important;
    }
    
    .SimpleEntertainmentMenu li:hover a, /* hovered text */
    .SimpleEntertainmentMenu li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover span,
    .SimpleEntertainmentMenu li:hover li:hover a,
    .SimpleEntertainmentMenu li:hover li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    .SimpleEntertainmentMenu li:hover li:hover li:hover a,
    .SimpleEntertainmentMenu li:hover li:hover li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
    {
        color: White;
        background: transparent url(activeArrowRight.gif) right center no-repeat;
    }
    
    .SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */
    .SimpleEntertainmentMenu li:hover li span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,
    .SimpleEntertainmentMenu li:hover li:hover li a,
    .SimpleEntertainmentMenu li:hover li:hover li span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
    {
        color: Black;
        background: transparent url(arrowRight.gif) right center no-repeat;
    }
    
    .SimpleEntertainmentMenu .AspNet-Menu-Selected /* this tier is selected */
    {
        border: solid 1px #00ff00 !important;
    }
    
    .SimpleEntertainmentMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */
    {
        border: solid 1px #ff0000 !important;
    }
    
    .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */
    {
        border: solid 1px #0000ff !important;
    }
    
    #EntertainmentMessage
    {
        padding-top: 2em;
        clear: both;
    }
    
    .SimpleEntertainmentMenu .static-menu-item
    {
    	background-color:Red;
    }

     Here is aspx file:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        void OnClick(Object sender, MenuEventArgs e)
        {
            MessageLabel.Text = "You selected " + e.Item.Text + ".";
            e.Item.Selected = true;
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <link rel="stylesheet" href="SimpleMenu.css" type="text/css" />
    </head>
    <body>
        <form id="form2" runat="server">
            <asp:Menu ID="Menu1" DataSourceID="SiteMapDataSource1" runat="server" Orientation="Horizontal" CssSelectorClass="SimpleEntertainmentMenu">
            </asp:Menu>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    
            <div id="Div1">
                <asp:Label id="MessageLabel" runat="server" />
            </div>
        </form>
    </body>
    </html>

     I have used the provided solution by the last version of codeplex and changed it to test and it work ok as you can see in this picture:

    The menu is also working ok in my other solution, that uses master page, themes, div layout, etc.

    By the issues you describe you are having it seems that you are including css rules that are smashing the core rules that the menu uses for the basic issues of hide and show, etc, when you use the CSSFriendly.dll it has the core js an css files embedded by default, so you will see in the final source code something like this:

    <link href="/Web/WebResource.axd?d=33Y7I1zsXjh92fP2K9I6JlOwqo-_5lO0fws9qV8YeYqGji7xY7vSV9EOEQe189rY0&t=633457025648266087" type="text/css" rel="stylesheet" />

     That it wasn´t on the first aspx above, but is inserted at runtime by the adapter, tipically this css is like this:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */
    
    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */
    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */ 
    /* See WhitePaper.aspx for details. */
    
    ul.AspNet-Menu 
    {
        position: relative;
    }
    
    
    ul.AspNet-Menu, 
    ul.AspNet-Menu ul
    {
        margin: 0;
        padding: 0;
        display: block;
    
    }
    
    ul.AspNet-Menu li
    {
        position: relative;
        list-style: none;
        float: left;
    }
    
    ul.AspNet-Menu li a,
    ul.AspNet-Menu li span
    {
        display: block;
        text-decoration: none;
    }
    
    ul.AspNet-Menu ul
    {
        position: absolute;
        visibility: hidden;    
    }
    
    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: hidden;
    }
    
    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }
    
    .AspNet-Menu-Vertical ul.AspNet-Menu li
    {
        width: 100%;
    }
    

     But if you  include css rules that conflit with these your menu won't work well. To solve your problem, look at the view source at browser, check what css files are being included (not the web resources), open the files and remove the css rules that are conflicting with the core rules that the menu needs to perform the basic operations.

     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 07, 2008 05:52 PM|OutOfTouch|LINK

    Ok, I completely removed the default.css file and any skins from my master Page and content page and guess what? It still won't work in my master page. Now I have no other css or styles that could possibly interfere with the menu and I still can't get it working.

    In my master page I have a wrapper div  then a Header div then a Div for the login status control then a DIV for the menu nav then a div for the footer.

    I even moved the menu outside of all this and it doesn't work.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 08, 2008 10:46 AM|OutOfTouch|LINK

    Strange,  I don't know what I did but the submenus started showing in IE7, I cleared the browser cache and everything and it would not work, then somehow it started working, magic I guess, maybe asp.net had it cached in IIS I don't know for sure what the problem was.

    I did notice something strange in IE 7 though with both the SimpleMenu.aspx and SimpleMenu.css and my modified MenuExample.css when bound to my site map, when I hover over a top level menu item that has children that have children(3 Levels) I notice empty 3rd level menu box(s) showing up next to the top levels children for the 3rd level even though I haven't moved my mouse yet over a child only the top 1st tier level? It acts like it remembers I was there the last time or something.  Is there a way to fix that?

    I also went back to my MenuExample.css file after seeing the SimpleMenu.css working in IE7 and it to worked, well almost, the 3rd level children are not appearing over the content section they are getting cut off by my main-navigation divs height, IE is acting as if it is ignoring the Z-index on them, I also can't get the acticve arrow to show with this css.

    Here is the MenuExample.css I am using:

     

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */
    
    
    /* This style sheet is intended to contain OFTEN CHANGED rules used when the Menu control adapter is enabled. */
    
    
    /* When the Menu control's Orientation property is Vertical the adapter wraps the menu with DIV */
    /* whose class is AspNet-Menu-Vertical. */
    /* Note that the example menu in this web site uses relative positioning to force the menu to occupy */
    /* a specific place in the web page.  Your web site will likely use a different technique to position your */
    /* menu.  So feel free to change all the properties found in this CSS rule if you clone this style sheet. */
    /* There is nothing, per se, that is magical about these particular property value choices.  They happen to */
    /* work well for the sample page used to demonstrate an adapted menu. */
    .PrettyMenu .AspNet-Menu-Vertical
    {
        position:relative;
        top: 3em;
        left: 0;
        z-index: 300;
    }
    
    
    /* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */
    /* So, effectively says: style all tiers in the menu this way... */
    .PrettyMenu ul
    {
        background: black; /*#7795BD;*/
    }
    
    
    /* Top tier */
    .PrettyMenu .AspNet-Menu-Vertical ul.AspNet-Menu
    {
        width: 9em;
    }
    
    
    /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
    /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
    /* the topmost tier's appearance. */
    .PrettyMenu ul.AspNet-Menu ul
    {
        width: 20.5em;
        left: 8.9em;
        top: -1em;
        z-index: 400;
    }
    
    
    .PrettyMenu ul.AspNet-Menu ul ul
    {
        width: 11.5em;
        left: 10.4em;
    }
    
    
    /* The menu adapter generates a list item (li) in HTML for each menu item. */
    /* Use this rule create the common appearance of each menu item. */
    .PrettyMenu ul.AspNet-Menu li
    {
        background:#400000 url(bg_nav.gif) repeat-x;
    }
    
    
    /* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
    /* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
    /* in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. */
    /* The second image comes from this rule (below). */
    .PrettyMenu ul.AspNet-Menu li a,
    .PrettyMenu ul.AspNet-Menu li span
    {
        color: white;
        padding: 4px 2px 4px 8px;
        border: 1px solid #660000;
        border-bottom: 1px solid #660000 ; /*04/25/2008*/
        background: transparent url(arrowRight.gif) right center no-repeat;
    }
    
    
    /* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
    {
        background-image: none;
    }
    
    
    /* Not used presently.  This is here if you modify the menu adapter so it renders img tags, too. */
    .PrettyMenu ul.AspNet-Menu li a img
    {
        border-style: none;
        vertical-align: middle;
    }
    
    
    /* When you hover over a menu item, this rule comes into play. */
    /* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */
    /* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */
    /* See MenuAdapter.js (in the JavaScript folder). */
    .PrettyMenu ul.AspNet-Menu li:hover,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
    {
    	background:#FFEFD5;
       color:Black; /*04/25/2008*/
    }
    
    
    .PrettyMenu ul.AspNet-Menu li:hover a,
    .PrettyMenu ul.AspNet-Menu li:hover span,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover a,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover span,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a:hover,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
    {
        color: Black;
    }
    
    
    .PrettyMenu ul.AspNet-Menu li:hover ul a,
    .PrettyMenu ul.AspNet-Menu li:hover ul span,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a,
    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
    {
        color: White; /*04/25/2008*/
    }
    
    
    /* While you hover over a list item (li) you are also hovering over a link or span because */
    /* the link or span covers the interior of the li.  So you can set some hover-related styles */
    /* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
    .PrettyMenu ul.AspNet-Menu li a:hover,
    .PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover
    {
        color: Red;
        background: transparent url(blackArrowRight.gif) right center no-repeat;
    }
    
    
    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
    {
        background-image: none;
    }
    
    
    
    
    /* -------------------------------------------------------------------------- */
    /* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */
    /* whose class is AspNet-Menu-Horizontal. */
    /* Note that the example menu in this web site uses absolute positioning to force the menu to occupy */
    /* a specific place in the web page.  Your web site will likely use a different technique to position your */
    /* menu.  So feel free to change all the properties found in this CSS rule if you clone this style sheet. */
    /* There is nothing, per se, that is magical about these particular property value choices.  They happen to */
    /* work well for the sample page used to demonstrate an adapted menu. */
    
    
    .PrettyMenu .AspNet-Menu-Horizontal
    {
    	margin:0 auto;
       position:relative; /*IE does not like this to be relative, is this the floated div problem in IE?*/
       left: .25em;
       top: 0em; /*.25em*/
       z-index: 300;
       
    
    }
    
    
    /* This rule controls the width of the top tier of the horizontal menu. */
    /* BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the top tier menu items that are lined */
    /* up from left to right. In other words, this width needs to be the width of the individual */
    /* top tier menu items multiplied by the number of items. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
    {
        width: 65em; /*45*/ /*IE seems to show the entire width instead of just showing what is filled*/
    }
    
    
    /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
    /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
    /* the topmost tier's appearance. */
    /* Remember that only the topmost tier of the menu is horizontal.  The second and third tiers are vertical. */
    /* So, they need a much smaller width than the top tier.  Effectively, the width specified here is simply */
    /* the width of a single menu item in the second and their tiers. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
    {
        width: 10.5em; /*10.5em*/
        left: 0;
        top: 100%;
    }
    
    
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
    {
        top: -0.3em;
    }
    
    
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
    {
        width:11.5em; /*11.5em*/
    }
    
    
    /* Generally, you use this rule to set style properties that pertain to all menu items. */
    /* One exception is the width set here.  We will override this width with a more specific rule (below) */
    /* That sets the width for all menu items from the second tier downward in the menu. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
    {
        width: 10em; /*5em*/
        text-align:left;
    }
    
    
    /* This rule establishes the width of menu items below the top tier.  This allows the top tier menu items */
    /* to be narrower, for example, than the sub-menu items. */
    /* This value you set here should be slightly larger than the left margin value in the next rule. See */
    /* its comment for more details. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
    {
        text-align:left;
        width: 12.0em; /*10.5em*/
    }
    
    
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
    {
        width: 12.0em; /*11.5em*/ /*TopTier*/
    }
    
    
    /* Third tier menus have to be positioned differently than second (or top) tier menu items because */
    /* they drop to the side, not below, their parent menu item. This is done by setting the last margin */
    /* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */
    /* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */
    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul
    {
        margin: .25em 0 0 11.75em; /* Original Value -1.4em 0 0 10.35em;*/
    }
     

     

     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 08, 2008 10:46 AM|OutOfTouch|LINK

    Delete this duplicate post.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 08, 2008 12:07 PM|OutOfTouch|LINK

    For me IE7 is also ignoring the z-index on the 3rd tier for the SimpleMenu.css as well. This is more annoying then the blank menu box I see for a 3rd level menu items when hovering over the top level menu item.

  • ppatrick ppatrick

    None

    0 Points

    8 Posts

    Re: Documentation is lacking?

    May 08, 2008 02:04 PM|ppatrick|LINK

    Well, if you have more than 3 levels, you need to extend the core css file, that is the Menu.css. To do that, open the CCSFriendly solution, and change where it is written:

     

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: hidden;
    }
    
    
    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }

     to this:

    /* Add more rules here if your menus have more than three (4) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li:hover ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul
    {
        visibility: hidden;
    }
    
    /* Add more rules here if your menus have more than three (4) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }
    
    Save the menu.css file and rebuild the CSSFriendly solution, and copy the new CSSFriendly.dll to you project bin directory.

     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 08, 2008 02:30 PM|OutOfTouch|LINK

    I only have 3 levels to my menu. Any reason why IE 7 would be ignoring my Z-index on the menu tiers?

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 08, 2008 06:24 PM|OutOfTouch|LINK

    Is my default CSS causing a problem with IE7 not showing the sub menu item over my content div?

     

     

    .foo{} /* For the W3C Standard */
    /******************
    HTML Tags
    ******************/
    /* *<-- Means all tags in html? */
    /* *
    {
    	margin:<span class='val'><span class='unit'>0</span></span>;
    	 padding:<span class='val'><span class='unit'>0</span></span>;
    } */
    
    
    body
    {
    	text-align: center;
    	font-family: "Arial, Geneva, Tahoma, Verdana, Sans-Serif";
    	font-size: 0.78em;
    	background-color: #400000;
    	width: 100%;
    }
    
    
    /*<span class='sel'>p</span>
    {
    	margin:<span class='val'> <span class='unit'>1</span>em <span class='unit'>0</span></span>;
    	line-height:<span class='val'> <span class='unit'>1.5</span>em</span>;
    } */
    
    
    h1
    {
    	margin: 0 0 0 0;
    	font-size: 2.0em;
    	font-weight: bold;
    }
    
    
    h2
    {
       margin: 0 0 0 0;
    	font-size: 1.5em;
    	font-weight: bold;
    }
    
    
    h3
    {
       margin: 0 0 0 0;
    	font-size: 1.2em;
    	font-weight: bold;
    }
    
    
    h4
    {
    	margin: 0.5em 0;
    	font-size: 1.1em;
    	font-weight: bold;
    }
    
    
    h5
    {
    	margin: 0.5em 0;
    	font-size: 1em;
    	font-weight: bold;
    }
    
    
    h6
    {
    	margin: 0.5em 0;
    	font-size: 0.9em;
    	font-weight: bold;
    }
    
    
    /********************
    LAYOUT WRAPPER DIV
    *********************/
    #wrapper
    {
    	width:900px;
    	margin:0 auto;
    	padding-bottom: 2px;
    	/* border:<span class='val'><span class='unit'>1</span>px solid #<span class='unit'>000000</span></span>; */
    	border-style:none;
    	text-align:left;
    	background-color: inherit;
    	position: relative;
    }
    
    
    #wrapper, #header-container, #main-loginstatus,  #main-content
    {
    	background:transparent;
    }
    
    
    #header-container
    {
    	text-align:left;
    	/* left:<span class='val'> <span class='unit'>50</span>px</span>; */
    	/*float:<span class='val'> left</span>;*/
    	margin:0 auto;
    	height: 74px;
    	width: 800px;
    	position: relative;
    	background-repeat: no-repeat;
    	background-position:right;
    	background-image: url(Images/Plainlog.jpg);
    	z-index: 0;
    	border-style: none;
    	/*clear:<span class='val'>both</span>;*/
    }
    
    
    #header-image-logo
    {
    	width:165px;
    	border-style: none;
    	/*border:<span class='val'>solid <span class='unit'>1</span>px yellow</span>;*/
    }
    
    
    .imgLog
    {
    	z-index:1;
    	border-style: none;
    }
    
    
    #main-loginstatus
    {
    	float:left;
    	/* border:<span class='val'>solid <span class='unit'>1</span>px blue</span>; */
    	border-style: none;
    	position:relative;
    	left: 50px;
    	width: 163px;
    	height: 75px; /*125*/
    	background-repeat: repeat-y;
    	background-image: url(Images/topbar2short.jpg);
    	/*z-index:<span class='val'> -<span class='unit'>1</span></span>;*/
    	/*clear:<span class='val'>both</span>;*/
    }
    
    
    .lgnStatus
    {
    	z-index:1;
    	position:relative;
    	top: 0px;
    	left: 5px;
    }
    
    
    #main-navigation
    {
    	margin:0 auto;
    	width: 637px; /*637*/
    	height: 75px; /*125*/
    	position: relative;
    	background-repeat: repeat-y;
    	background-position:left;
    	background-image: url(Images/topbar2long2.jpg);
    	left: 50px;
    	float: left;
    	border-left: solid 2px Navy;
    	border-right: solid 2px Navy;
    	/*clear:<span class='val'>right</span>;*/
    }
    
    
    /********************
    MAIN CONTENT DIV
    *********************/
    #main-content
    {
    	margin:0 auto; /*04/25/2008*/
    	width: 800px;
    	/* height:<span class='val'><span class='unit'>448</span>px</span>; */
    	position: relative;
    	background-repeat: repeat-y;
    	background-image: url(Images/ContentSection.jpg);
    	/*background-position:<span class='val'>left</span>;*/
    	left: 50px;
    	color: #000000;
    	float: left;
       border-style: none;
    	/*clear:<span class='val'>both</span>;*/
    }
    /*********************
    FOOTER CONTAINER
    **********************/
    #footer-container
    {
    	position: relative;
    	background-position: center;
    	background-image: url(Images/BottomFlames.jpg);
    	background-repeat: no-repeat;
    	width: 900px;
    	height: 169px;
    	border-style: none;
    	float: left;
    	left: 5px;
    	clear: both;
    }
    
    
    /*********************
    DEFAULT LANDING PAGE
    **********************/
    #landingtext
    {
    	text-align: left;
    	width: 792px;
    }
    
    
    .landingwelcome
    {
    	font-weight: bold;
    	font-size: 2.0em;
    	margin: .5em;
    	
    
    }
    
    
    .pLandingText
    {
    	font-size: 1.3em;
    	margin: 1em;
    }
    
    
    /**************************************
    CONTAINER DIV
    ***************************************/
    #main-content .container
    {
    	text-align: left;
    	margin: 10px 20px 0px 20px;
    	border-style: none;
    }
    
    
    #main-content .container .teaser
    {
    	margin-top:-0.2em;
    	color: #8B0000;
    	font-weight: bold;
    }
    
    
    #main-content .container .note
    {
    	font-size:1.2em;
    }
    
    
    .firstLetter
    {
    	text-decoration: underline;
    }
    
    
    .button
    {
    	color: #FFFFFF;
       background-color: #8B0000;
       font-size: 1.5em;
    	cursor: pointer;
    	height: 35px;
    }
    	
    
    #main-content fieldset
    {
    	margin-bottom: 25px;
    	padding: 25px;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #000000;
    }
    
    
    /*#<span class='sel'>main</span>-<span class='sel'>content</span> <span class='sel'>fieldset</span> <span class='sel'>label</span>
    {
    	font-weight:<span class='val'>bold</span>;
    	font-size:<span class='val'> <span class='unit'>1</span>em</span>;
    }*/
    
    
    #main-content fieldset legend
    {
    	color: #8B0000 ;
    	background-color: #FFFFFF;
    }
    
    
    .container > p
    {
    	margin: 1em 0;
    	line-height: 1.5em;
    }
    
    
    /*******************************************
    LOGIN
    *******************************************/
    .btnloginContainer
    {
    	text-align:center;
    	position: relative;
    }
    
    
    .aspA
    {
    	text-decoration:underline;
    }
    
    
    .aspA:hover
    {
    	text-decoration:none;
    }
    
    
    /*******************************************
    MANAGE PROFILE
    *******************************************/
    .btnSubmit
    {
    	height:50px;
    }
    
    
    /*******************************************
    CHOOSE ORDER LOCATION
    *******************************************/
    .divLegend
    {
    	margin-bottom: 1em;
    }
    
    
    .divLegend label
    {
    	font-size:  1.0em;
    }
    
    
    .select
    {
    	z-index:1000;
    }
    
    
    
    
    /*******************************************
    ORDER FORM
    *******************************************/
    .mpImage
    {
    	border-color: Lime;
    	border-style: solid;
    	
    
    }
    	
    
    .mpImageFormRow
    {
    	text-align: center;
    	margin-top:0px;
    	padding:0px;
    	width:100%;
    }
    
    
    .spanInfo
    {
    	font-style: italic;
    	color: #8B0000;
    	/*font-size:<span class='val'> .<span class='unit'>75</span>em</span>;*/
    	color: #8B0000;
    }
    
    
    .txtGradHeadLine
    {
    	width: 300px;
    }
    
    
    .txtGradTeaser2
    {
    	width: 500px;
    }
    
    
    .txtSpecInst
    {
    	padding: 20px 0px 0px 10px;
    	width:100%;
    	height:100%
    }
    
    
    /*******************************************
    ALL FORMS
    *******************************************/
    /*.<span class='sel'>txtBox</span>
    {
        border:<span class='val'><span class='unit'>1</span>px solid #<span class='unit'>CCCC66</span></span>;
        background-color:<span class='val'>#<span class='unit'>F7F7E8</span></span>;
    }*/
    
    
    .VS
    {
    	margin-left: 25px;
    	color: Red;
    	font-size: 1.3em;
    }
    
    
    .divCenterBtn
    {
     text-align:center;
     height:50px;
    }
    
    
    .txtReadOnly
    {
    	background-color:#A9A9A9;
    }
    
    
    .tblForm
    {
    	margin-top:20px;
    	border-width: 0px;
    	padding:0px;
    	width: 100%;
    	/* border="0" cellpadding="0" cellspacing="0" width="100%" */
    }
    
    
    .firstFormRow
    {
    	margin-top:0px;
    	padding:0px;
    }
    
    
    .formRow
    {
    	padding-top: 20px;
    }
    
    
    .tdLabel
    {
    	text-align:left;
    }
    
    
    .tdInput
    {
    	text-align:left;
    }
    
    
    /* <span class='sel'>fieldset</span>.<span class='sel'>formlayout</span>
    {
    	margin-left:<span class='val'><span class='unit'>10</span>px</span>;
    	text-align:<span class='val'>left</span>;
    }
    
    
    <span class='sel'>fieldset</span>.<span class='sel'>formlayout</span> <span class='sel'>label</span>
    {
    	clear:<span class='val'>left</span>;
    	float:<span class='val'>left</span>;
    	width:<span class='val'>auto</span>;
    	font-weight:<span class='val'>bold</span>;
    	font-size:<span class='val'> <span class='unit'>1</span>em</span>;
        display:<span class='val'> block</span>;
        text-align:<span class='val'> right</span>;
        padding-right:<span class='val'> <span class='unit'>10</span>px</span>;
        margin-bottom:<span class='val'> <span class='unit'>0.5</span>em</span>;
        line-height:<span class='val'> <span class='unit'>1.5</span>em</span>;
       
    
    }
    
    
    <span class='sel'>fieldset</span>.<span class='sel'>formlayout</span> <span class='sel'>input</span>
    {
        padding:<span class='val'> <span class='unit'>0</span>px</span>;
        margin-bottom:<span class='val'> <span class='unit'>0.8</span>em</span>;
    } */
    
    
    /*
    
    
    <span class='sel'>fieldset</span>.<span class='sel'>formlayout</span> <span class='sel'>select</span>
    {
        margin-left:<span class='val'> <span class='unit'>0.5</span>em</span>;
        border:<span class='val'> <span class='unit'>1</span>px dotted #<span class='unit'>e1e1e1</span></span>;
        display:<span class='val'> inline-block</span>;
        width:<span class='val'> <span class='unit'>425</span>px</span>;
    }
    
    
    <span class='sel'>fieldset</span>.<span class='sel'>layoutStoreLoc</span>
    {
    	
    
    }
    
    
    <span class='sel'>fieldset</span>.<span class='sel'>layoutStoreLoc</span> <span class='sel'>label</span>
    {
    
    
    	width:<span class='val'><span class='unit'>200</span>px</span>;
        display:<span class='val'> inline</span>;
        text-align:<span class='val'> left</span>;
        padding-right:<span class='val'> <span class='unit'>10</span>px</span>;
        margin-bottom:<span class='val'> <span class='unit'>0.5</span>em</span>;
        line-height:<span class='val'> <span class='unit'>1.5</span>em</span>;
    }
    
    
    <span class='sel'>fieldset</span>.<span class='sel'>layoutStoreLoc</span> <span class='sel'>select</span>
    {
    	width:<span class='val'>auto</span>;
    	line-height:<span class='val'> <span class='unit'>1.5</span>em</span>;
    	margin-bottom:<span class='val'> <span class='unit'>0.5</span>em</span>;
    	margin-top:<span class='val'> <span class='unit'>0.5</span>em</span>;
    }
    
    
    */
    
    
    /*<span class='sel'>fieldset</span>.<span class='sel'>formlayou</span> <span class='sel'>legend</span>
    {
        width:<span class='val'><span class='unit'>200</span>px</span>;
    }*/
    
    
    /****************************************************
    FORM LAYOUT
    ****************************************************/
    
    
    
    
    
    
    /*******************************************
    TERMS AND CONDITIONS FORM
    *******************************************/
    .olTC
    {
    	margin-left: 40px;
    }
    
    
    .liSpan
    {
    	text-decoration: underline;
    	font-weight: bold;
    }
    
    
    .spanULBld
    {
    	text-decoration: underline;
    	font-weight: bold;
    }
    
    
    /***********************************
    CHANGE PASSWORD STYLES
    ************************************/
    .changePwd
    {
    	margin-bottom:10px;
    	text-align:center;
    }
    
    
    .recoverPwd
    {
    	margin-bottom:10px;
    }
    
    
    /**************************************
    MASKED EDIT CLASSES
    ***************************************/
    .MaskedEditFocus
    {
    	background-color: #FFFFE0;
    }
    
    
    .MaskedEditError
    {
    	background-color: #FFC0CB;
    }
    
    
    .MaskedEditFocus
    {
        background-color: #ffffcc;
        color: #000000;
    }
    
    
    .MaskedEditMessage
    {
    	color: #ff0000;
    	font-weight: bold;
    }
     

     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 09, 2008 10:43 AM|OutOfTouch|LINK

    Ok I noticed that my main content div has position:relative and when I remove it that the menu does appear above the content section, problem is I need to leave the position:relative in for my layout to look correct.

    My second problem with empty menu boxes showing up when hovering over a parent on the menu I believe is being caused by the IE7:hover ghosts bug described here:

    http://murphy.cz/ie7-hover-ghosts-bug/#nested-divs-ghosts-demo

     Unfortunately I am not a CSS master so this will be difficult for me to fix but I will try. If anyone can help that would be great.

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 09, 2008 02:38 PM|OutOfTouch|LINK

    I tested my site map again by binding it to the menu that is in the SimpleMenu.aspx page that comes with the adapter project, I can see that this IE 7 bug is not caused by me but exists in the unchanged SimpleMenu.css or the core Menu.css files that comes with the CSSFriendlyControl Adapters. Was this bug missed?

    Can someone else please confirm or disprove this.

    Thank You!

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 09, 2008 05:02 PM|OutOfTouch|LINK

    OutOfTouch

    Ok I noticed that my main content div has position:relative and when I remove it that the menu does appear above the content section, problem is I need to leave the position:relative in for my layout to look correct.

    I think I fixed my first problem by applying a z-index value to the menu's containing div to a value that is higher then any surrounding divs although I am not sure why the z-index I have on the menu itself didn't solve the IE bug just like the following article shows it has a containing div around the menu but the solution was to give the menu a z-index value.

    http://csscreator.com/?q=blog/z-index

    If anybody knows why, please let me know but keep in mind I had my div that the asp menu control was in and the CSS Friendly Control Adapters create the following  containment divs as well with the following names: The first div has a class name = to the cssselectorclass on your menu and an id = to the id of your menu the second containment div will be one of these  AspNet-Menu-Horizontal or AspNet-Menu-Vertical.

    I am still working on the second bug and would appreciate anyhelp offered.

    Thank You!

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 09, 2008 05:08 PM|OutOfTouch|LINK

    OutOfTouch

    Ok I noticed that my main content div has position:relative and when I remove it that the menu does appear above the content section, problem is I need to leave the position:relative in for my layout to look correct.

    My second problem with empty menu boxes showing up when hovering over a parent on the menu I believe is being caused by the IE7:hover ghosts bug described here:

    http://murphy.cz/ie7-hover-ghosts-bug/#nested-divs-ghosts-demo

     Unfortunately I am not a CSS master so this will be difficult for me to fix but I will try. If anyone can help that would be great.

    Sorry the link I provided is not correct,  here is the exact link to the exact section in the example of this bug that I think I am experiencing.

    http://murphy.cz/ie7-hover-ghosts-bug/#drop-down-menu-ghosts 

     

     

  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 11, 2008 02:28 AM|OutOfTouch|LINK

    I found the solution to the second bug as well. It appears the source of the MenuAdapter.cs in CSSFriendlyControl Adapters V 1.0 I downloaded off of codeplex still has the following line in error in it:

    Quoting Elan: string cssTag = "&lt;link href=\"" + Page.ResolveUrl(filePath) + "\" type=\"text/css\" rel=\"stylesheet\"&gt;</link>";

    needed to become

    string cssTag = "&lt;!--[if lt IE 7]><link href=\"" + Page.ResolveUrl(filePath) + "\" type=\"text/css\" rel=\"stylesheet\"&gt;</link><![endif]-->";
    I discovered this by reading Elans post found here:

    http://forums.asp.net/p/1042595/1455132.aspx

    This is should be done on the section that writes the path out for the IMenu6.css file. 

    This makes me wonder why this hasn't been fixed yet when it was discovered almost a year ago. I keep reading the project isn't dead but I can't find a more current production release build then 1.0 which was released more then a year ago. I would also like to see all the samples that exist on the asp.net CSSFriendly Page exist in the codeplex version as well as a VB.Net version on code plex.

    With that said this is a great idea and I hope it doesn't die and that we will see a new release soon and more community involvement in the forums and the project in the near future.

    I should add that it is working in FireFox and IE 7, I haven't had a chance to retest in IE 6 yet though.

    At least I will definitely be trying to improve my css skills now.Again thanks for the help!
  • OutOfTouch OutOfTouch

    Member

    47 Points

    217 Posts

    Re: Documentation is lacking?

    May 12, 2008 12:29 PM|OutOfTouch|LINK

    It looks like the ghost issue was corrected in change set 4403.  http://www.codeplex.com/cssfriendly/SourceControl/ListDownloadableCommits.aspx

    With all the release builds why is there not an updated production release?

  • Falcon Falcon

    None

    0 Points

    35 Posts

    Re: Documentation is lacking?

    May 13, 2008 12:02 PM|Falcon|LINK

    For all intents and purposes, the releases on CodePlex should be considered the production releases. It seems like Microsoft has pretty much washed their hands of this project. I believe that Russ was only hired to get the adapters to version 1, which is unfortunate, because I feel this is important enough that Microsoft should be paying developers to do this instead of relying on the community to do it for them for free (although I'm really glad the community has stepped up to do it). I wish the main CSS Friendly Adapters page would at least have a link to the CodePlex project now.

    It's very difficult to trust Microsoft's commitment to standards when they keep making small moves toward them only to abandon them soon after.

  • ‹ Previous Thread|Next Thread ›