Styling the Menu Control

stephenf · March 17th, 2009, 01:11 AM

I am doing this exercise and getting strange results...

I copied the Web.sitemap file that is provided to make sure everything in there is correct.

When I run the site, I see this for the links:

Home Reviews Expand Reviews About Expand About Login

And I'm not sure why... Can anyone help?

stephenf · March 17th, 2009, 01:18 AM

Also when I preview the page in Design Mode (MasterPage.master) it says:

Home Reviews About Login

Imar · March 17th, 2009, 03:36 AM

Hi there,

Do you actually see the word Expand?

Can you post the code for the page with the controls and the actual sitemap? Please use the Code button on the toolbar to make the code easier to read...

Cheers,

Imar

stephenf · March 17th, 2009, 08:41 AM

Imar,

Yes I literally see the word Expand in there.

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
      <div id="Header"><a class="HeaderLink" href="~/" runat="server"></a></div>
      <div id="MenuWrapper">
        <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" 
          DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
          StaticEnableDefaultPopOutImage="False">
          <StaticMenuItemStyle ItemSpacing="10px" />
        </asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
          ShowStartingNode="False" />
      </div>
      <div id="MainContent">
        <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
        </asp:ContentPlaceHolder>
      </div>
      <div id="Sidebar">Select a Theme
        <asp:DropDownList ID="lstPreferredTheme" runat="server" AutoPostBack="True" 
          onselectedindexchanged="lstPreferredTheme_SelectedIndexChanged">
          <asp:ListItem>Monochrome</asp:ListItem>
          <asp:ListItem>DarkGrey</asp:ListItem>
        </asp:DropDownList>
      </div>
      <div id="Footer">Footer Goes Here</div>
    </div>
    </form>
</body>
</html>

Code:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/" title="Home" description="Home">
    <siteMapNode url="~/Default.aspx" title="Home" description="Go to the homepage" />
    <siteMapNode url="~/Reviews/Default.aspx" title="Reviews" description="Reviews published on this site">
      <siteMapNode url="~/Reviews/AllByGenre.aspx" title="By Genre" description="All Reviews Grouped by Genre" />
      <siteMapNode url="~/Reviews/All.aspx" title="All Reviews" description="All Reviews" />
    </siteMapNode>
    <siteMapNode url="~/About/Default.aspx" title="About" description="About this Site">
      <siteMapNode url="~/About/Contact.aspx" title="Contact Us" description="Contact Us" />
      <siteMapNode url="~/About/AboutUs.aspx" title="About Us" description="About Us" />
    </siteMapNode>
    <siteMapNode url="~/Login.aspx" title="Login" description="Log in to this web site" />
  </siteMapNode>
</siteMap>

Thank you!

philip_cole · March 17th, 2009, 09:46 AM

Are you running this in Firefox? From memory, the menu renders an image for the user to click on to expand the menu. The alt text for this is set to "Expand x".
So run it in IE if possible and there should be a small square instead of Expand, or do a View Source and check what is being output. If it is an image, just put one in the appropriate place on your site so it shows. (Edit->Find is your friend here - the HTML the menu creates isn't very pretty)

Phil

stephenf · March 17th, 2009, 10:14 AM

Hmm it seems like you're right. I was actually running it with Google Chrome. If I run it in IE it looks fine. Does this mean if I ever use menu's like this I can't accurately view them in Chrome/Firefox? And that would mean that also goes for anyone who views the sites I design... That's inconvenient! Unless I'm misunderstanding?

philip_cole · March 17th, 2009, 01:37 PM

Strange. The menu has StaticEnableDefaultPopOutImage="false" which should stop any image being rendered at all!
I notice you have a DropDownList to select the theme on the page as well. Can you see in any of the .skin files if this is turned back on? There would be a line looking something like:

Code:

<asp:Menu StaticEnableDefaultPopOutImage="True" />

In whichever case, you should still get an image if this is enabled, as the default is to use an arrow image built into the .NET dlls. This can be overriden by setting StaticPopOutImageUrl in the <asp:Menu> tag, or PopOutImageUrl within an item.

Phil

Imar · March 17th, 2009, 02:41 PM

Quote:

Does this mean if I ever use menu's like this I can't accurately view them in Chrome/Firefox?

It works fine on Firefox. The full book was developed and tested on multiple browsers, including IE and Firefox.

Chrome wasn't out by then, so there might be an issue there.

I think that Chrome is not detected as a browser capable of handling menus. You can alter the browser settings on the server or do it at the site level:

http://blog.the-dargans.co.uk/2008/0...work-with.html

(Ckeck out the browser caps reference in the comments )

More info:
http://forums.asp.net/p/1315088/2713325.aspx#2713325
http://www.google.com/search?hl=en&q...chrome&aq=f&oq=

Cheers,

Imar