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 79 Views

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

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

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