RadMenu not wrapping in IE8 with a DOCTYPE of HTML 4.0 Transitional

3 posts, 0 answers
  1. Paul
    Paul avatar
    4 posts
    Member since:
    Apr 2009

    Posted 05 Nov 2010 Link to this post

    I have a site that needs to use a DOCTYPE of of HTML 4.0 Transitional as it contains lots of user generated content that does not display properly in XHTML 1.0 Transitional.

    I have a vertical menu to which I have added style="white-space:normal" so that items within it wrap. This all works fine in Chrome, Firefox and Safari but in IE8 the menu items do not wrap.

    Any ideas how I can fix this?

    Below is an aspx page  that demonstrates this

    <%@ Page Language="C#" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
          <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
          </telerik:RadScriptManager>
          
          <telerik:RadMenu ID="RadMenu1" Runat="server" Flow="Vertical" Width="100px">
            <Items>
              <telerik:RadMenuItem runat="server" Text="This is the first very long menu item" style="white-space:normal"></telerik:RadMenuItem>
              <telerik:RadMenuItem runat="server" Text="This is the second very long menu item" style="white-space:normal"></telerik:RadMenuItem>
              <telerik:RadMenuItem runat="server" Text="This is the third very long menu item" style="white-space:normal"></telerik:RadMenuItem>
            </Items>
          </telerik:RadMenu>
         </div>
        </form>
    </body>
    </html>


    Thanks,

    Paul Cripps



  2. Yana
    Admin
    Yana avatar
    5001 posts

    Posted 11 Nov 2010 Link to this post

    Hi Paul,

    Please try it like this:

    <%@ Page Language="C#" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            div.RadMenu,
            div.RadMenu .rmLink
           {
                width: 100px !important;
                white-space: normal;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Vertical" Width="100px">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="This is the first very long menu item">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="This is the second very long menu item">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="This is the third very long menu item">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>
        </form>
    </body>
    </html>

    I hope it helps.

    Greetings,
    Yana
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Paul
    Paul avatar
    4 posts
    Member since:
    Apr 2009

    Posted 11 Nov 2010 Link to this post

    Yana,
    That worked perfectly.

    Thanks,

    Paul
Back to Top