What causes the extra blank line after menu items in my ASP.NET Menu under IE8?

Question

I am using asp:Menu for the first time and running into a problem.

I have a horizontal menu with four options. The third option is "Filter". Hovering over "Filter" produces a vertical drop-down menu with several options, two of which are "Filter Category One" and "Filter Category Two". The dropdown menu with those options looks fine until I hover over one of the options (such as "Filter Category One") that has children.

At that time a blank line appears under "Filter Category One" at the same time that its own menu options (children) appear off to the right. Also a blank line appears at the bottom of the level-3 menu, which is the child menu that appears when I hover over "Filter Category One". In other words, the menu with the options Filter 1.1, Filter 1.2, and Filter 1.3 (see below) has a blank line below Filter 1.3.

I suspect (but am not positive) that the blank line between Filter Category One and Filter Category Two when hovering over Filter Category One has the same cause as the extra blank line that appears after Filter 1.3.

My customer uses only IE 8. I browsed using Firefox and Chrome and did not experience this particular problem. (Many other problems showed up, but not this particular one.)

I've found complaints about asp:Menu and IE8 at stackoverflow and elsewhere, but I have not seen a complaint identical to mine.

I would appreciate any help.

I'll be happy to attach a pic if there is a way to upload one.

FOLLOW-UP: We use IE8 Quirks Mode. The problem disappears in IE 8 Standards or IE 7 Standards mode (though other problems appear).

<asp:Menu 
                    OnMenuItemClick="Menu_ItemSelected"
                    Orientation="Horizontal" 
                    ID="MainMenu" 
                    runat="server" 

                    StaticDisplayLevels="1"

                    DynamicHoverStyle-BackColor="LightGray" 
                    DynamicHoverStyle-BorderColor="Black"
                    DynamicHoverStyle-BorderStyle="Solid" 
                    DynamicHoverStyle-BorderWidth="1" 

                    StaticMenuItemStyle-BorderColor="gray"
                    StaticMenuItemStyle-BorderWidth="1" 
                    StaticMenuItemStyle-BorderStyle="Solid" 
                    StaticMenuItemStyle-HorizontalPadding="15px" 

                    DynamicMenuStyle-BorderColor="Black"
                    DynamicMenuStyle-BorderStyle="Solid" 
                    DynamicMenuStyle-BorderWidth="1" 
                    DynamicMenuStyle-BackColor="WhiteSmoke"
                    DynamicMenuStyle-HorizontalPadding="0" 

                    DynamicMenuItemStyle-HorizontalPadding="5"
                    DynamicMenuItemStyle-Font-Size="X-Small"

                    >
                    <Items>
                        <asp:MenuItem Text="Home" NavigateUrl="javascript:mainPage_Click()" />
                        <asp:MenuItem Text="Job Details" NavigateUrl="javascript:jobDetailsPage_Click()" />

                        <asp:MenuItem Selectable="false" Text="Filter">

                            <asp:MenuItem Selectable="true" Text="Clear Filter"/>

                            <asp:MenuItem Selectable="false" Text="Filter Category One">
                                <asp:MenuItem Selectable="true" Text="Filter 1.1"/>
                                <asp:MenuItem Selectable="true" Text="Filter 1.2"/>
                                <asp:MenuItem Selectable="true" Text="Filter 1.3"/>
                            </asp:MenuItem>

                            <asp:MenuItem Selectable="false" Text="Filter Category Two">
                                <asp:MenuItem Selectable="true" Text="Filter 2.1"/>
                                <asp:MenuItem Selectable="true" Text="Filter 2.2"/>
                                <asp:MenuItem Selectable="true" Text="Filter 2.3"/>
                            </asp:MenuItem>

                        </asp:MenuItem>

                        <asp:MenuItem Text="Help" NavigateUrl="ITOBPSLADB_help.htm" Target="_blank" />                            
                    </Items>
                </asp:Menu>

Please don't make the target of navigateurl to be javascript functions. It makes it impossible to middle click to open in a new tab and breaks accessibility (which is required by law in some countries). — Nikki9696, Nov 02 '12 at 20:52
I tested this code in IE8 and do not get a blank line when hovering - which means it's probably an issue with any other CSS you have set up. — Nikki9696, Nov 02 '12 at 20:58
Nikki, my navigateurl targets are JavaScript functions that make visible or invisible parts of the same HTML page to which the JavaScript belongs. What is wrong with that? And if it's bad, how should I do it? BTW This is not an app for the general public. It is an internal app used only by a select group of people at an American company. — DaveInATL, Nov 02 '12 at 21:15
Well, the standard way if it were an external app would be to submit to the same page by default (have a proper href with a url argument) and have code behind that handles it, then complementary javascript for normal clicks/browsers that cancels the click (onclick return false type of thing) to get the pretty responsiveness for js-enabled clients. That said, for a small internal app, that's way overkill. — Nikki9696, Nov 02 '12 at 21:22
Oh, and to answer the what's wrong with it question, IF this were an external site and had like job listings or something, it would make it very hard for users to look at more than one listing at a time. This is actually a pet peeve of mine with petfinder - the links don't open in a new tab and I lose my spot from searching. So it's a simple annoyance factor in that regard. The bigger issue (again, external sites) is that the site will not function in browsers used by the visually impaired and won't index well in search engines. — Nikki9696, Nov 02 '12 at 21:30

score 2 · Answer 1 · answered Nov 02 '12 at 21:19

Unable to replicate your issue with the following code and IE8 in Compatibility view. Please correct my doctype or whatever is different here from yours so that this code also breaks/shows blank lines in IE8.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:Menu 
                    OnMenuItemClick="Menu_ItemSelected"
                    Orientation="Horizontal" 
                    ID="MainMenu" 
                    runat="server" 

                    StaticDisplayLevels="1"

                    DynamicHoverStyle-BackColor="LightGray" 
                    DynamicHoverStyle-BorderColor="Black"
                    DynamicHoverStyle-BorderStyle="Solid" 
                    DynamicHoverStyle-BorderWidth="1" 

                    StaticMenuItemStyle-BorderColor="gray"
                    StaticMenuItemStyle-BorderWidth="1" 
                    StaticMenuItemStyle-BorderStyle="Solid" 
                    StaticMenuItemStyle-HorizontalPadding="15px" 

                    DynamicMenuStyle-BorderColor="Black"
                    DynamicMenuStyle-BorderStyle="Solid" 
                    DynamicMenuStyle-BorderWidth="1" 
                    DynamicMenuStyle-BackColor="WhiteSmoke"
                    DynamicMenuStyle-HorizontalPadding="0" 

                    DynamicMenuItemStyle-HorizontalPadding="5"
                    DynamicMenuItemStyle-Font-Size="X-Small"

                    >
                    <Items>
                        <asp:MenuItem Text="Home" NavigateUrl="javascript:mainPage_Click()" />
                        <asp:MenuItem Text="Job Details" NavigateUrl="javascript:jobDetailsPage_Click()" />

                        <asp:MenuItem Selectable="false" Text="Filter">

                            <asp:MenuItem Selectable="true" Text="Clear Filter"/>

                            <asp:MenuItem Selectable="false" Text="Filter Category One">
                                <asp:MenuItem Selectable="true" Text="Filter 1.1"/>
                                <asp:MenuItem Selectable="true" Text="Filter 1.2"/>
                                <asp:MenuItem Selectable="true" Text="Filter 1.3"/>
                            </asp:MenuItem>

                            <asp:MenuItem Selectable="false" Text="Filter Category Two">
                                <asp:MenuItem Selectable="true" Text="Filter 2.1"/>
                                <asp:MenuItem Selectable="true" Text="Filter 2.2"/>
                                <asp:MenuItem Selectable="true" Text="Filter 2.3"/>
                            </asp:MenuItem>

                        </asp:MenuItem>

                        <asp:MenuItem Text="Help" NavigateUrl="ITOBPSLADB_help.htm" Target="_blank" />                            
                    </Items>
                </asp:Menu>
    </div>
    </form>
</body>
</html>

I copied your code into a new project. I had to change Inherits="WebApplication3._Default" to Inherits="WebApplication2._Default", and I removed the OnMenuItemClick. The blank line problem did not appear until I switched to IE8 Quirks Mode, which is what this company uses. — DaveInATL, Nov 02 '12 at 21:31
Edit: oh, wait. When you say "blank lines", do you mean the little bit of whitespace between the word "home" and "job details"? I bet I'm looking at the wrong area. — Nikki9696, Nov 02 '12 at 21:36
No, that little bit of whitespace is there on purpose. This problem is not seen until you hover over the Filter option and then hover over Filter Category One. But I think you'll have to be in IE8 Quirks Mode to duplicate this problem. Basically a whitespace gap about the height of a line appears between Filter Category One and Filter Category Two as you hover over Filter Category One. Also a similar blank area appears under Filter 1.3 (and Filter 2.3) in those child menus. — DaveInATL, Nov 02 '12 at 21:43
Since this problem occurred even with the bare-bones code above, I've ruled out my CSS as a cause. I really think this is an IE8 issue, but I'd like to work around it. Thanks for the help! — DaveInATL, Nov 02 '12 at 21:43
It's killing me that I don't see a blank line. Good luck in your mission, sorry I couldn't help more. — Nikki9696, Nov 02 '12 at 21:48

What causes the extra blank line after menu items in my ASP.NET Menu under IE8?

1 Answers1