Menu control

kiwibrit · November 8th, 2009, 12:13 PM

Applying styling pretty much as in the book to the conventional menu control I have a problem.

Using a .gif background , I get a faint rectangular patch behind the text

This doesn't happen when using CSS control adapters (which I am still tweaking so can't use live yet), or a Suckerfish-based Menu (which I don't want to use, since I can't figure how to highlight a selected button).

So the problem does seem to be related to the Menu control. Is there a way round this (the light background behind the text)? In case it helps, here is the code:

Code:

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

And here is the CSS:

Code:

#MenuWrapper
{
margin-left: 5px;
background-color: #606060;
padding-bottom:1.2em;
}

.MainMenu
{
}

.StaticMenuItemStyle, .StaticMenuItemStyle a, StaticMenuItemStyle a:visited
{
    color:black;
    background-color:white;
    background-image:url('/images/menu/css-nav.gif');        
    font-size: .8em;
    font-weight: bold;
    text-align:center;
    text-decoration: none;
    line-height:20px;
    width:80px;
    padding-left: 5px;
}

.StaticHoverStyle, .StaticHoverStyle  a
{
     color:Black;
    background-color: Gray;
    background-image:url('/images/menu/css-nav-hov.gif');
}

.StaticSelectedStyle, .StaticSelectedStyle a
{
    color:#223188;
    background-color: Blue;
    background-image:url('/images/menu/css-nav-sel.gif');
}

.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;
}

Imar · November 8th, 2009, 02:21 PM

Hi there,

Is there a way to see this page live so I can look at the HTML and CSS?

Imar

kiwibrit · November 8th, 2009, 05:08 PM

Sure . Not much to see - I am playing with different layouts- but at the moment it does show the problem - particularly for the page selected button, and hover.

Imar · November 9th, 2009, 01:05 PM

I am not exactly sure yet what's causing the white rectangle but if I remove the line-height property from the StaticMenuItemStyle selector, the rectangle disappears. is that what you're after?

Imar

kiwibrit · November 9th, 2009, 01:48 PM

Huh! How odd. That did remove the rectangle of colour problem - but I did want the line height specified. Anyway, with no line height specified, I went for

Code:

 display:block;

- to get the whole of each nav button active. I then changed

Code:

padding-right

to

Code:

margin-right

. Then as an after thought, I tried adding back the line height - and it was fine - no unwanted block of colour.

Anyway, you triggered the line of thought that solved this - I just wasn't getting anywhere before, so thank you very much.

Imar · November 9th, 2009, 01:54 PM

What I did was this:

1. Opened your page

2. Pressed F12 in IE 8 to open the Developer Toolbar

3. Use the "select tool" to point at a menu item

4. Disabled styles by unchecking them until the problem went away.

Maybe this helps you in finding other odd issues as well.

Cheers,

Imar

kiwibrit · November 9th, 2009, 02:06 PM

Well, I do use the Web Developer tool in Firefox, and I did have a go at changing the CSS using that, but just didn't think that line-height would have an effect, so didn't knock it out. You have taught me to be more rigorous, and reminded me not to assume, but check.

I had no idea IE8 had that tool

- it looks even more powerful that Web Developer - and I shall be checking it out. So thanks for pointing me at it.

Imar · November 11th, 2009, 02:01 PM

You're welcome.....

kiwibrit · November 30th, 2009, 02:27 PM

I mentioned earlier in this thread that I was playing with CSS Friendly Adapters - as referred to in the book. I had hoped to write some brief 'how -to-do-it notes here. However, although they certainly show promise, they have been tricky for me to implement fully. Working on a horizontal menu, I can get the selected page to highlight if, when clicking a menu button, instead of going to another page, I get a label to say the desired page is loaded. But when clicking a new button results in a new page, I cannot get the selected page highlighted in the menu. There presumably has to be an on-page-load event - but I haven't figured it yet. I have looked at a tutorial video, and the White Paper, but without luck so far.

Unfortunately, the Professional ASP.NET book gives no further guidance. All very frustrating. Maybe it's something Imar could consider for the next version of his book?

Imar · November 30th, 2009, 03:33 PM

There's no need to address this in my new book. The CSS Adapters will probably become obsolete for many situations as the Menu control can render as a simple <ul> list with <li> elements in .NET 4......

Imar