Chapter 7 Hover problems.

Bryan22 · June 22nd, 2011, 02:42 AM

I have completed the styling menu controls exercise and nothing is happening when I hover over the menu. all the rest of the styles, ie background color, are fine. Just nothing is changing while hovering.

Here is my masterpage code:

Code:

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

And here is the Monochrome.css code for these classes:

Code:

.StaticMenuItemStyle, .StaticMenuItemStyle a
{
    color: #707070;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    padding-left: 2px;
}

.StaticHoverStyle, .StaticSelectedStyle
{
    background-color: #c1e4ce;
}

.DynamicMenuItemStyle
{
    font-size: 14px;
    color: #707070;
    background-color: #cccccc;
    padding: 4px, 2px, 4px, 3px;
}
.DynamicHoverStyle
{
    background-color: #707070;
    color: white;
}
.DynamicHoverStyle a
{
    text-decoration:none;
}

Any help in solving this would be greatly appreciated.

Ps, doesn't work in either firefox or IE

Thanks!
Bryan.

Imar · June 22nd, 2011, 05:37 AM

Hi Bryan,

I copied and pasted your code into my project and it works as expected, except for the padding. You have this:

Code:

 
padding: 4px, 2px, 4px, 3px;

while it should be

Code:

 
padding: 4px 2px 4px 3px;

Howver, that affects padding only and not the hovering.

Maybe you're looking at a cached copy of the page? try reloading the page with Ctrl+F5.

Do the menus fold out correctly when you hover? In other words, is the problem in the hovering color only? In the latter case, is there other CSS in the theme file that could override your settings?

Imar

Bryan22 · June 22nd, 2011, 11:19 AM

Ok, I changed the padding. I tried reloading the page like you've suggested and it doesn't work. Yes, the sub-menu items do drop out they just don't change color on hover. My css file was copied directly from the resources file only thing being added is what I showed in the first post. I just don't get it. everything looks like it should work, but it doesn't!

Imar · June 22nd, 2011, 02:59 PM

Can you send me a zipped copy of the website so I can take a look?

You can send me a message through my web site (see link in my signature). I'll then reply so you know my e-mail address.

Cheers,

Imar

Bryan22 · June 22nd, 2011, 08:15 PM

Message sent. thanks!

Imar · June 24th, 2011, 05:35 AM

Ah, I see.

You're following the 3.5 book / code with a VS 2010 / .NET 4 project. While most of it will work, you will run in some issues when it comes to control rendering. The .NET 4 menu renders completely different code than its predecessor, breaking the CSS you add to the theme to style the menu.

Take a look at this thread for suggestions on how to fix this:

Spacing menu options across menu bar

Cheers,

Imar

Bryan22 · June 24th, 2011, 09:45 AM

That worked great thanks. But what code would I have to do differently for it to work with 4.0 ? If that's not too complicated to answer here.

Imar · June 24th, 2011, 01:37 PM

You could download the source code for the 4.0 version of the book. A lot is pretty similar (the Master Page for example), so hopefully it's easy to spot the differences in CSS. You can also check out the live site at www.planetwrox.com.

Cheers,

Imar

Bryan22 · June 25th, 2011, 12:34 PM

Awesome. thanks so much for your help. Have a great weekend!

Bryan

Imar · June 26th, 2011, 03:36 AM

You're welcome, and you too.

Cheers,

Imar