RadMenu for ASP.NET
Contents
Menu items stack over each other under FireFox and IE 7 Send comments on this topic.
See Also
Troubleshooting > Menu items stack over each other under FireFox and IE 7

Glossary Item Box

Symptoms

The menu items stack over each other:  

 

FireFox and IE 7.0:

Menu items stacked under FF and IE7

 

The menu looks normal under IE 6:

menu items normal under IE 6
Here is the aspx code which produces the above menu:
  Copy Code
<rad:RadMenu runat="server" ID="RadMenu1" Skin="CssBlue">
 <Items>
     <rad:RadMenuItem Text="Root Item 1" runat="server" Width="20px">
         <Items>
             <rad:RadMenuItem Text="Child Item 1" runat="server" />
             <rad:RadMenuItem Text="Child Item 2" runat="server" >
                <Items>
                     <rad:RadMenuItem runat="server" Text="Child RadMenuItem">
                     </rad:RadMenuItem>
                </Items>
             </rad:RadMenuItem>
          </Items>
     </rad:RadMenuItem>
     <rad:RadMenuItem runat="server" Text="Root Item 2" Width="20px">
     </rad:RadMenuItem>
     <rad:RadMenuItem runat="server" Text="Root Item 3" Width="20px">
     </rad:RadMenuItem>
 </Items>
</rad:RadMenu>
        

The reason for this problem is that the width is rendered as a css attribute which is handled differently by FireFox and IE 7 browsers.

Solution

Remove the Width or set it to a larger value. If you do not set the Width,  the item will automatically take enough space to accommodate its content.

For more information, please see the MSDN KB on Cascading Style Sheet Compatibility in Internet Explorer 7

See Also