This is a migrated thread and some comments may be shown as answers.

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

2 Answers 61 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 05 Nov 2010, 03:43 PM
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 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 11 Nov 2010, 09:20 AM
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
0
Paul
Top achievements
Rank 1
answered on 11 Nov 2010, 10:08 AM
Yana,
That worked perfectly.

Thanks,

Paul
Tags
Menu
Asked by
Paul
Top achievements
Rank 1
Answers by
Yana
Telerik team
Paul
Top achievements
Rank 1
Share this question
or