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

RTL with Images in IE7 or IE8

7 Answers 116 Views

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

Gary asked on 06 Jul 2012, 06:00 PM

7-6-2012-10-59-12-AM.png

7-6-2012-10-58-08-AM.png

The following code does not render correctly in IE7 or IE8. It works fine in IE9 and other non IE browsers. It seems that if I remove the images from the menu it will render fine in IE7 or IE8.

Please let me know a solution to get this to work with the images, rtl, and width is 100%.

Thanks

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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">

<telerik:RadScriptManager ID="ScriptManager" runat="server" />

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRootItemScroll="true" Width="100%" dir="rtl" EnableAutoScroll="true" >

<Items>

<telerik:RadMenuItem Text="Home" ImageUrl="/images/icons/102.gif" />

<telerik:RadMenuItem Text="Task List" ImageUrl="/images/icons/102.gif" />

<telerik:RadMenuItem Text="IT Admin" ImageUrl="/images/icons/102.gif" />

<telerik:RadMenuItem Text="Content List" />

<telerik:RadMenuItem Text="My Knowledge Views" />

<telerik:RadMenuItem Text="Start Process" ImageUrl="/images/icons/102.gif" />

<telerik:RadMenuItem Text="Running Workflows" />

</Items>

</telerik:RadMenu>

</form>

</body>

</html>

7 Answers, 1 is accepted

answered on 10 Jul 2012, 04:59 AM

Capture.PNG

Hello,

Try the following code snippet to achieve your scenario.

CSS:

<style type="text/css">

.RadMenu_Default_rtl .rmItem

{

position: relative !important;

}

</style>

ASPX:

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRootItemScroll="true" Width="100%" dir="rtl" EnableAutoScroll="true">

<Items>

<telerik:RadMenuItem Text="Home" ImageUrl="../Images/bullet5.jpg" />

<telerik:RadMenuItem Text="Task List" ImageUrl="../Images/bullet5.jpg" />

<telerik:RadMenuItem Text="IT Admin" ImageUrl="../Images/bullet5.jpg" />

<telerik:RadMenuItem Text="Content List" />

<telerik:RadMenuItem Text="My Knowledge Views" />

<telerik:RadMenuItem Text="Start Process" ImageUrl="../Images/bullet5.jpg" />

<telerik:RadMenuItem Text="Running Workflows" />

</Items>

</telerik:RadMenu>

Attached is the screenshot.

Thanks,
Princy.

answered on 10 Jul 2012, 03:29 PM

7-10-2012-8-26-26-AM.png

Princy thanks for your help on this. Unfortunately that still has not resolved the issue. Not sure if you are running in the IE 7 document mode but that is where I am seeing the issue. It looks great in IE 9 document mode. Attached is a screenshot in IE 7 document mode.

answered on 12 Jul 2012, 12:12 PM

562741----RTL-menu-with-Images-in-IE7-or-IE8.zip

Hello, Jay.

I am not 100% sure why and what was wrong, but I was able to fix it quite easily:

1) I moved the styles for the width from the menu, to a css snippet
2) I tweaked the snippet a bit no to be using floats.

See the attached file.

All the best,
Ivan Zhekov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 12 Jul 2012, 02:58 PM

7-12-2012-7-55-17-AM.png

Ivan,

Thanks for the reply. Unfortunately the scrolling does not work now. If you shrink the window and refresh you will notice the menu items go to a second line. I need to have the scrolling available.

Thanks

answered on 16 Jul 2012, 08:38 AM

562741----RTL-menu-with-Images-in-IE7-or-IE8.zip

Hello, Jay.

For scrolling to work you need to set width e.g. width 100%; and then you need to tweak the styles a bit.

I have updated the example and attached it.

Regards,
Ivan Zhekov
the Telerik team