Edit: Never mind. I found that when I add CssClass="MainMenu" to my code, then when I change it in the .MainMenu area, it does in fact show the changes. (but not when that line isn't added)

I don't see how to delete this post, so I 'll just leave my original question so you know what I was talking about.

----
Hi Imar:

I have two questions regarding the exercise on page 251:

On page 251, you show how the menu should look as so:

yours:

<div id="MenuWrapper">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" CssClass="MainMenu"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
<StaticSelectedStyle CssClass="StaticSelectedStyle" />
<StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
</asp:Menu>

But mine looks like so: Only difference is that yours has the CssClass="MainMenu"

mine:

<div id="MenuWrapper">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
<StaticSelectedStyle CssClass="StaticSelectedStyle" />
<StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
</asp:Menu>

I noticed that if I add that statement - (CssClass="MainMenu") - my menu items are spaced further apart. Without it, the items are right next to each other to the far left side of the menu.

So I'm wondering why yours added that but mine didn't. Were we supposed to just type that in or should it have been automatically added when we followed the prior instructions where we added the menu control and set the CssClass settings?

In trying to understand it, I did a search for .MainMenu and found under the App_Themes, monochrome.css file, the following:

.MainMenu
{
/*
The Menu gets a white border on all four sides.
*/
border: 1px solid #FFFFFF;
width: 814px;
height: 19px;
background-color: #C0C0C0;
}

Then I tried playing with some of those settings but noticed that no matter what I changed, it doesn't change anything. For example I tried changing the border color to purple and even the width on the border from the build style window but when I viewed the page in the browser, nothing I change under the .MainMenu {} section changes the way the page is displayed in the browser.

Is this being overridden somewhere else?

Rachel

Yes, well, that should make some sense when you think about how CSS works.

When you set this in ASPX code:

CssClass="MainMenu"

it ends up like this in the browser's HTML

.... class="MainMenu" .....

Items with a class MainMenu are affected by the .MainMenu selector in the CSS file. So, if your .MainMenu selector looks like this:

.MainMenu
{
color: green
background-color: yellow;
}

you'll get a yellow background with a green font. Likewise, the current definition in the Themes folder for .MainMenu gives it a border, background-color and a color.

BTW: Step 2 on page 246 instructs you to set the MainMenu CssClass...

Cheers,

Imar

__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!

Thanks Imar:

I feel clumsy. I don't know how I missed that.


Rachel

Hi Rachel,

Since you edited your post and remove the part about the missing red stars, am I right when I asssume that problem has been fixed now?

Imar

__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!

Ahh! You can see what I removed.

Yes. I figured it out. The red *s were there, but they were too far to the right of the page to see them. I finally got the width of the table decreased enough to see them. But I"m still having some trouble controlling my table format. I highlighted the colums with the textboxes in them and *right* aligned them all, then *left* aligned the red *s so they would appear right next to the text boxes but the text boxes still seem to be left aligned. I reduced the width of the entire table and so now I can see the red *s but they still don't align as I tried to align them.

Rachel

Not really. However, I get notified by e-mail of new posts. These notifications contain the initial message before it's edited.

HTML tables may behave strange when they don't have an exact width. Looks like they have a 100% width in your case so columns may end up at odd places you don't expect.

Try giving the table a width that equals the sum of the widths of the columns and give the columns an explicit width as well.


Imar

__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!